I have the following code:
<link rel='stylesheet' media='only screen and (min-device-width : 1281px)' href='css/screenAllLarge.css' />
<link rel='stylesheet' media='only screen and (min-device-width : 800px) and (max-device-width : 1280px)' href='css/screenSmaller.css' />
it is supposed to work for screen resolution 1281px and above. But When I re-size the screen it still applies the same screenAllLarge.css CSS file
I also changed the media='only screen' to media='screen but no luck. I am testing this with Firefox.
What am I doing wrong?
thank you
You must have cover the two differents options, set the intervals correctly
media='only screen and (min-width: 1281px)' href='css/screenAllLarge.css'
media='only screen and (min-width: 768px) and (max-width: 1280px)' href='css/screenAllSmall.css'
Related
I've got my visitor portal setup for 3 types of devices: mobile (less than 800px width), low-res desktop and hi-res desktop, like this:
<link media="only screen and (min-width: 801px) and (max-height: 899px)" href="..." rel="stylesheet" type="text/css">
<link media="only screen and (min-width: 801px) and (min-height: 900px)" href="..." type="text/css">
<link media="only screen and (max-width: 800px)" href="..." rel="stylesheet" type="text/css">
All this works rather well but with the iPad Pro portrait, the width of the screen is less than 800px but the stylesheet that's selected is the low-res desktop. What do I need to change to make it work?
Edit (to clarify the problem)
When I do something like this
<link media="only screen and (min-width: 801px) and (max-height: 899px)" href="..." rel="stylesheet" type="text/css">
<link media="only screen and (min-width: 801px) and (min-height: 900px)" href="..." rel="stylesheet" type="text/css">
<link media ="only screen and (max-width: 800px),
only screen and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:1.1) and (orientation:portrait),
only screen and (max-device-height:1366px) and (-webkit-min-device-pixel-ratio:1.1) and (orientation:landscape)"
href="..." rel ="stylesheet" type="text/css">
The problem is that the styles get mixed-up at different resolutions. I'm looking to make it work so that only one stylesheet is active at anytime.
iPad Media Queries
iPad Media Queries (All generations - including iPad mini)
iPad in portrait & landscape
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
iPad in landscape
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}
iPad in portrait
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
To know more about device media queries, please visit Stephen.io/mediaqueries
Source credits to http://stephen.io/mediaqueries/
Hope this may help you.
Thank you
So, if i were you, I will do something like this:
<!-- small devices non-retina (apple use 2x for ipads and 3x for the newest iphones) -->
<link media="only screen and (max-width: 800px)" href="..." rel="stylesheet" type="text/css">
<!-- small devices retina (apple use 2x and 3x) -->
<link
media="only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px),
only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 800px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 800px),
only screen and (min-device-pixel-ratio: 2) and (max-width: 800px),
only screen and (min-resolution: 192dpi) and (max-width: 800px),
only screen and (min-resolution: 2dppx) and (max-width: 800px)"
href="..." rel="stylesheet" type="text/css">
<!-- bigger devices low-res -->
<link media="only screen and (min-width: 801px) and (max-height: 899px)" href="..." rel="stylesheet" type="text/css">
<!-- bigger devices higher res -->
<link media="only screen and (min-width: 801px) and (min-height: 900px)" href="..." rel="stylesheet" type="text/css">
If you see in this article of CSS Tricks: Media Queries for Standard Devices you can go very specific trying to point each devices. Or get use of some of this examples (maybe in combination with orientation: portrait)
Lastly I'll like to say that, personally, I only use the -webkit-min-device-pixel-ratio: 2 or -webkit-min-device-pixel-ratio: 3 to point to the high-res raster/bitmap images (jpg and png) I'll use.
I hope this help.
You can find more info about 2x and 3x devices and how this affects images on this article from Apple.
Other resources:
MDN Media Queries.
Already mentioned by another answer (CSS Tricks): Retina Display Media Query.
Already mentioned by myself, also CSS Tricks: Media Queries for Standard Devices
A comparative of devices and screens: A quick reference for iOS devices
More official sources:
W3C Recommendation 19 June 2012 - Media Queries - Resolution
Apple's Safari Web Content Guide - Optimizing Web Content
Android's Supporting Multiple Screens
iPad pro has a retina display, with a pixel aspect ratio of probably 2, which makes virtually 2 x 800 = 1600 pixels. That's why the selected media query is the wrong one. You'll have to deal with pixel aspect ratio too. See this : https://css-tricks.com/snippets/css/retina-display-media-query/
This Query working on all device I hope your issue is resolve.
#media only screen and (max-width:767px){
.big-dot{
width:280px; height:280px; margin:0 auto; background:red;
}
}/*===========Mobile Device=============*/
#media only screen and (min-width:768px) and (max-width:1280px){
.big-dot{
width:280px; height:280px; margin:0 auto; background:green;
}
}/*===========Tab and IPad Pro Device=============*/
#media only screen and (min-width:1280px) {
.big-dot{
width:280px; height:280px; margin:0 auto; background:cyan;
}
}/*===========Large Desktop Device=============*/
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="big-dot">
Time Big Dot /.....
</div>
</body>
</html>
have you included <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your <head>? I find including this makes retina devices behave as expected without any extra fiddling with 2x and 3x devices mentioned by f-spin
edit: just beware, you may find this affects layout that currently works well, but overall should make media queries more predictable once you've got over that (probably quite small) hump
As per my knowledge resolution of iPad Pro is (1024x1366)px and iPad Pro9.7 is (768x1024)px. So if you want to load specific stylesheet for specific resolution, then you might be load the stylesheet of
<link media="only screen and (min-width: 768px) and (max-width: 1199px)" href="..." rel="stylesheet" type="text/css">
I think this will help you.
This Query working on all device I hope your issue is resolve.
/*---------------------------------------------------------------------
Large Desktops
-----------------------------------------------------------------------*/
#media only screen and (min-width: 992px) and (max-width: 1200px) {
}
/*---------------------------------------------------------------------
Desktops
----------------------------------------------------------------------*/
#media only screen and (min-width: 768px) and (max-width: 991px) {
}
/*---------------------------------------------------------------------
Tablets Devices
-----------------------------------------------------------------------*/
#media only screen and (min-width: 480px) and (max-width: 767px) {
}
/*----------------------------------------------------------------------
Mobile Devices
------------------------------------------------------------------------*/
#media only screen and (min-width: 360px) and (max-width: 479px) {
}
/*----------------------------------------------------------------------
Small Screen Mobile Devices
-----------------------------------------------------------------------*/
#media only screen and (min-width: 320px) and (max-width: 359px) {
}
In a website, I use a media query for small devices, effective for screen resolutions <=980px.
Problems is: on the iPad, in horizontal view (1024px), the css file is applied.
Why is that?
On the desktop (Firefox), I don't have this problem. I tried changing to max-device-width, no difference.
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="medium.css" media="(max-width:1150px)">
<link rel="stylesheet" href="mobile.css" media="(max-width:980px)">
Thanks for the answers so far.
To be clear: I am not looking for a way to target the iPad. I am looking for the reason behind the iPad's behaviour. It's screen has a width of 1024px, but it applies a stylesheet it should not. Why?
Edit:
I found the problem/solution. See below.
try to create the media query within a seperate CSS stylesheet, which will automatically detect what size the viewport is.
This site is a really good one:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Use this media query to to target all iPad versions (iPad 1-5 & Mini).
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
Additionally, check out the solution posted for this problem.
you don't have to create additional CSS file for this just use this and add your code
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
----CODE HERE----
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
----CODE HERE----
}
The iPad browser works with the following information:
width and device-width: 768 px
height and device-height: 1024 px
The orientation of the device does not matter in regard to which value is height and which one is the width!
That means in landscape mode, the browser promotes width = 768 px
In my opinion, this is a bug. The 'width' property should contain the width of the browser window.
Now I use the following media query on the website:
<link rel="stylesheet" href="mobile.css" media="(max-device-width:768px) and (orientation:portrait), (min-device-width:769px) and (max-width:980px)">
That works very well.
I have website with two css flies the first one to view the site in a desktop screen the second one to view it in Ipad screen , Knowing that they have the same HTML code ,,
my Q : is there any code to detect the Ipad and force to take the css file that is suitable for it??
thxx
edited section:
dears thxxx for the answer but css effect no longer appear, I think I code something wrong, what I have done is :
in the main page at the header I add thess lines:
<meta name="viewport" content="width=980" /><br/>
<link href="css/site.css" rel="stylesheet" type="text/css">
inside the site.css I code:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{
*
{
margin::0;
padding:0;
}
html , body
{
margin:0;
padding:0;
width:100%;
font-family:"Trebuchet MS";
font-size:12px;
}
.Wrapper{margin:0 auto;}
.InnerWrapper{width:100%;
margin:0;
padding-top:140px;
float:none;
display:block;
height:auto;}
.Header{padding-bottom:0;
height:140px;
background: none repeat scroll 0 0 #FFFFFF;
z-index: 100000;
position: fixed;
color: #000000;
float: left;
width: 100%;
box-shadow:0 -1px 7px 5px #888888;}
}
but this not work ... can you help please !!
You can use media queries for that. Just put below CSS code at the top of your iPad file and inside all the styles related to that device:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Put your iPad styles here (this covers portrait and landscape modes) */
}
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Put your iPad styles here (this covers landscape mode)*/
}
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Put your iPad styles here (this covers portrait mode)*/
}
What the media queries do is they check for the device width to identify if its an iPhone, iPad or any other mobile device. For more info just google "media queries".
Use media queries to determine screen size.
Phone & iPod touch:
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />
iPhone 4 & iPod touch 4G:
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />
iPad:
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />
Best way for that are mediaqueries:
Detect iPhone/iPad purely by css
Load css file for ipad only
Or detect with JS or PHP the USER-AGENT.
I add this line of code in my asp.net Solution at <header> area:
<% if (Request.UserAgent.ToLower().Contains("ipad"))
{ %>
<link rel="stylesheet" type="text/css" href="css/siteIpad.css" />
<% } %>
it's work fine,,,,
I need to float a div to the left when on the portrait mode via iPad. No matter what code that's inserted, nothing changes. Here's what I'm doing:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.logos{
float: left;
}
}
The site I'm working on: http://rachelsilberman.com/rob-anolik/
The "logos" div pushes down when someone is on the iPad, and I need it to float left so it will align with the contact div.
I've been using ipadpeek.com to view the outcome since I don't have one myself. Hopefully that doesn't make a difference.
Thanks!
You should be adding the attribute to your ipad css like below:
#media only screen and (min-device-width: 768px)
and (max-device-width: 1024px) and (orientation:portrait) {
.logos{
float: left;
}
}
GENERAL RULE FOR CSS FOR IPAD IS LIKE BELOW:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
I figured it out tonight. This may help others. I had to comment out the following line in my library.php file:
<!--<link rel="stylesheet" href="<?php echo get_template_directory_uri()?>/css/tablet.css" type="text/css" media="screen and (min-width:640px) and (max-width:1023px)" />!-->
After this, everything referred to the main style.css sheet which I wanted. I included two statements:
#media only screen and (min-width:641px) and (max-width:1023px) and (orientation:portrait) {
and
#media (max-device-width: 600px) and (orientation: portrait) {
Due to the issues I was observing on a Blackberry Playbook versus an iPad, I had to introduce the second #media line. I simply tweaked the values within those sections of my style.css code and voila! Everything works finally.
Here's a great site on the different sizes for screens: http://nmsdvid.com/snippets/
I'm pretty new in this area of developing, and I'm trying to figure out the making of iOS app using Phonegap. I've created four different CSS files for different resolutions.
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="css/ipad.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 2048px)" href="css/ipad-retina.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/iphone.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 960px)" href="css/iphone-retina.css" type="text/css" />
I found out that the Simulator always loads the same CSS file, even if I change devices. Is there any way to make it load css files properly?
Thanks people and by the way is my CSS calling correct?
Here is a way to achieve what you are after. Include the specific CSS required in each section.
/* Non-Retina */
#media screen and (-webkit-max-device-pixel-ratio: 1) {
}
/* Retina */
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}
/* iPhone Portrait */
#media screen and (max-device-width: 480px) and (orientation:portrait) {
}
/* iPhone Landscape */
#media screen and (max-device-width: 480px) and (orientation:landscape) {
}
/* iPad Portrait */
#media screen and (min-device-width: 481px) and (orientation:portrait) {
}
/* iPad Landscape */
#media screen and (min-device-width: 481px) and (orientation:landscape) {
}