I'm currently try to create proper #media queries to target 3 different device groups: phones, tablets and desktops
I use the following mixin in SASS to get it done:
#mixin respond-to($media) {
#if $media == phones {
#media only screen and (max-width: 320px) { #content; }
}
#else if $media == tablets {
#media only screen and (min-width: 321px) and (max-width: 979px) { #content; }
}
#else if $media == desktops {
#media only screen and (min-width: 980px) { #content; }
}
}
This actually works pretty well for most devices i have around.
BUT i have an iPad 2 here and tried the site with Safari and the following happens:
in portrait mode everything is fine. it will be handled by the "tablet" group as it should be.
in landscape mode (when it has 1024px width to work with) it will still fall into the tablet group. But it shouldnt as my layout works perfectly on screens wider than 980px.
As i found out the iOS devices always report their screen size as they were in portrait mode (actually a stupid idea) which in my case is 768x1024. With the media queries above it will never end up in the non-tablet section when its in landscape.
is there a way to exclude the ipad 2 in landscape mode from the tablet query WITHOUT disturbing other devices (like androids which behave correctly)?
Otherwise i have to target every device seperatly with their own strict media query which i want to avoid.
I bet the problem is due to your viewport meta tag. The following is what I use on all responsive sites:
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
I've been using Apple's Xcode tool (iOS Simulator) to code iPad views. I can't target landscape view on the iPad Retina device.
I've been trying the following media queries...
#media only screen and (min-device-width : 768px) and (max-device-width
: 1024px) and (orientation : landscape) and ( -webkit-min-device-
pixel-ratio: 2){ //style goes here// }
#media only screen and (min-device-width : 1536px) and (max-device-width
: 2048px) and (orientation : landscape) and ( -webkit-min-device-
pixel-ratio: 2){ //style goes here// }
I can't find any other way to target the landscape view in iPad Retina. I have even tried this code in different parts of the CSS file, still no luck at all.
The first one is correct, i use the same media query and is working on a real device.
Maybe you forgot to include the meta viewport?
I've just realized my FTP program was not working correctly when I entered the editor inside the Wordpress dashboard (the query was not there) so I manually wrote it dawn directly on my theme's CSS file and it worked.This FTP program stole hours from me.. but the query was right and the meta tag as well.
All in all, for anyone experiencing issues while coding new iPads Retina displays (32 and 64 bits), they should include the meta viewport in their headers:
<meta name="viewport" content="width=device-width, user-scalable=no">
and the corresponding query (Landscape view, in this case)is:
#media only screen and (min-device-width : 768px) and (max-device-width
: 1024px) and (orientation : landscape) and ( -webkit-min-device-
pixel-ratio: 2){ //style goes here// }
I'm working on a new website using em-based CSS media queries. In the past, I've always used px-based media queries. I wanted to try something new. I have things set up in such a fashion that most phones (in portrait), most phones (in landscape) and tablets (in portrait), and most tablets (in landscape) will see differences in the layout.
Everything works, as expected, on desktop browsers (IE, Firefox, Chrome), Android (Android browser, Chrome), and Windows Phone (IE). iOS (Safari) displays the portrait version, as expected, but switching to landscape keeps the portrait layout. This has been tested on an iPhone 5 (iOS7), iPad 2 (iOS7), and iPhone 4s (iOS6) and they are all consistently inconsistent.
HTML:
<meta name="viewport" content="width=device-width">
CSS:
/* portrait phone (< 480px) */
#media screen and (max-width:29.9999em) {
}
/* landscape phone and portrait tablet (>= 480px < 960px) */
#media screen and (min-width:30em) and (max-width:59.9999em) {
}
/* landscape tablet and normal monitor (>= 960px < 1440px) */
#media screen and (min-width:60em) and (max-width:89.9999em) {
}
/* bigger monitor (>= 1440px) */
#media screen and (min-width:90em) {
}
/* big monitor (>= 1920px) */
#media screen and (min-width:120em) {
}
So, the iPhone (landscape) should fall between (min-width:30em) and (max-width:59.9999em) and the iPad (landscape) should fall between (min-width:60em) and (max-width:89.9999em). Unfortunately, they both fall one query narrower.
While searching through stackoverflow, I found this post that says the default font size in mobile Safari is 12px (not 16px, as normal). I had not seen that on any other sites, but the calculations seemed to make sense (further calculating doesn't seem to put them in different media query groups, though).
In response, to that post, I set a base font-size of 16px.
CSS:
html { font-size:16px; }
My thought was that it would over-ride the browser's default setting and match with every other browser that was being tested. Unfortunately, mobile Safari is still using the portrait layout when in landscape.
I had read a few pages that mentioned needing to refresh with Safari (not sure if it was mobile or desktop), so I even tried that.
Does anyone have a reason why this is happening? As mentioned, I've created other sites using px-based media queries and they function as expected.
In media queries, the em is based on the browser's default font-size (note that the user can modify this). There's nothing you can do to alter this.
Related:
http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
http://designshack.net/articles/css/responsive-design-why-youre-doing-it-wrong/
http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/
This was the fix that ended up working...
CSS:
body {
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-ms-text-size-adjust:none;
-webkit-text-size-adjust:100%;
-moz-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
I'm working on a responsive site and I want to make the site react to the browser being made less than 1024px wide, and use those same styles for the iPad in Portrait.
However, if I apply a media query for styles when the browser is less than 1024 px like this
#media only screen and (max-width : 1024px) { /* styles */ }
They affect the iPad in Landscape which I don't want - how can I exclude the landscape iPad but include the Portrait iPad ?
Try this:
#media only screen and (max-width : 768px) { /* styles */ }
iPad's width in portrait is 768px.
#Phill Pafford gave the solution for my oposite problem: jquery mobile default font size using the meta viewport solution. But, this is great for up-sizing the viewport to adapt to a phone screen.
I'm implementing jQM framework only to give a mobile look-n-fell on a "regular" Web-based App that runs on computer screens. And the font looks very big on them! How can I globally down-size the font-size or adapt it (responsive design) to be more appealing (i.e. smaller) on a computer screen?
Thanks!
In your custom stylesheet, not the JQM stylesheet, group your styles with media queries:
/* Large desktop */
#media (min-width: 1200px) { font-size: 12px; }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
Why isnt the following media query being picked up on iPads in landscape mode?
#media all and (min-device-width: 1000px) {
css here
}
Or
#media all and (min-width: 1000px) {
css here
}
I want this css to target any browser which is 1000px wide or over, not just ipads. For this reason id rather work with the 2nd option of min-width not min-device-width if possible. Both versions work fine with firefox on my PC.
Thanks
The iPad is always reporting its width as 768px and its height as 1024px, so you have to find out how it is rotated with orientation and use min-device-height:1000px like so:
/* This will apply to all screens with a width 999px and smaller */
* {
color:green;
background-color:black;
}
/*
This will apply to all screens larger then 1000px wide
including landscape ipad but not portrait ipad.
*/
#media (orientation:landscape) and (min-device-height:1000px),
all and (min-width:1000px) {
* {
color:white;
background-color:red;
}
}
Results:
iPad
Portrait - green text - black background
Landscape - white text - red background
iPhone
Portrait - green text - black background
Landscape - green text - black background
Computer (resolution)
1680x1050 - white text - red background
800x600 - green text - black background
Using chrome & firefox (does anyone even use IE anymore?)
References:
w3 media queries
Safari CSS Reference
Optimizing Web Content
From http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
/* iPad [portrait + landscape] */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.selector-01 { margin: 10px; }
.selector-02 { margin: 10px; }
.selector-03 { margin: 10px; }
}
It looks like the screen attribute may be required.
If found this works great for the new iPad
#media screen and (orientation:landscape) and (min-device-height:1000px) and (-webkit-min-device-pixel-ratio : 2) {
* {
color:white;
background-color:red;
}
}
For the record, I'm not sure why
#media (min-width: 1000px) {
/* css here */
}
didn't work for you. Possibly something changed with the iPad since this question was first posted?
Here's a working example:
live view: http://fiddle.jshell.net/panchroma/Bn4ah/show/
edit view: http://fiddle.jshell.net/panchroma/Bn4ah/
Also be sure to include
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the head of your page.
I was trying to use a simple media query like this:
#media only screen and (min-width : 768px)
{css here}
but I wouldn't trigger on an iPad pro 10.5' I was testing on, I increase it to 900px (for portrait) and it worked just fine, I think because of the retina display you need to compensate, it may work fine on old iPads non-retina.
Trying to write a media query for tablet, I actually encountered the problem of the iPad underreporting its dimensions. When I tried to use #media screen and ( min-width: 768px ), my styles were being applied to other tablet devices, but ignored by the iPad. I started playing around with the Responsive device model in developer tools, and I stumbled onto the solution. For some reason, my styles would apply when I sized the screen down to 760px. So, I edited the media query to read #media screen and ( min-width: 760px ) and everything started working as expected.