Media Queries and Device Orientation
Get Oriented
It would be nice if all devices responded to media queries in exactly the same way, but they don’t. As discussed in our previous blog, screen resolution doesn’t determine how media queries respond on many devices. The retina display on the iPhone4S is a great example. It has a 640 by 960 resolution, but triggers media queries at 320px. That’s because of “pixel density.” The iPhone4S packs almost double the number of pixels into the available space, creating a much higher definition image. It doesn’t create more screen real estate, though, unless you want your text to be so tiny it’s unreadable. That’s why the iPhone 4S is set to respond to media queries as if its screen were 320px wide. What’s interesting about that particular device is that it responds to media queries at 320px whether it’s in portrait or landscape orientation.
So what are the actual widths for each device in CSS pixels?
To find out, we made a simple media query test to find out what ‘width’ each device would respond to. In the process, we learned that some re-check media queries and re-render emails when orientation is changed whereas others do not. Check out our results below:
| ‘Device Widths’ for Mobile Email Clients | ||||
| Device | Portrait Width | Landscape Width | Changes on Orientation | Changes on Zoom |
| Samsung Galaxy S II – Android 4 | 288 | 501 | yes | yes |
| Samsung Galaxy Proclaim v2.3.6* | 314 | 473 | yes | yes |
| Android 2.3 | 320 | 527 | yes | yes |
| iPhone5 – iOS4 | 320 | 320 | no | no |
| iPhone4S – iOS5 | 320 | 320 | no | no |
| iPhone5 – iOS5 | 320 | 320 | no | no |
| Sprint HTC EVO 4.3″ – Android 2.3 | 369 | 615 | yes | yes |
| Motorola Xoom – Android 2.3 | 481 | 481 | no | yes |
| Kindle 8.9″ HD – Android 2.3 | 600 | 900+ | yes | no |
| iPad – iOS5 | 703 | 703 | no | no |
| Kindle 7″ HD – Android 2.3 | 800 | 800 | no | no |
*This result was given to us via email by a reader. Thanks for helping!
Some devices running the Android OS returned different values for ‘width’ when zooming in and out whereas the each device running the iOS do not change.
Check out our screen shots below and see for yourself. The number that has large, red text is the pixel range that each screen fell into.
↓ Hover to see the landscape width ↓
Android 2.3
Android 4
iPad 5
iPhone 4S (iOS 6)
iPhone 5 (iOS 6.1)
Kindle 2.3
Join our Cause!
Do you have a device that’s not listed on our chart? We’d love your help! Here’s our handy media query width test. You can use it to check the width on your device. Send us a pic of what you found (and include the device name and OS) and we’ll add it to our list. Each screenshot that fills in a new row on our chart has a chance to win some sweet Email on Acid swag!
Remember: Gmail doesn’t support media queries, so this test won’t work in mobile Gmail apps.
Author: Kyle Lapaglia
Author: Kyle Lapaglia
6 thoughts on “Media Queries and Device Orientation”
Comments are closed.
Why not just base re-sizes on how well you content displays? For example only worry about 600 – 640 px (seems to be desktop standard) & under?
Then you don’t need to worry about all the different devices.
Chris,
Not sure I understand the question, do you mean percentage based rescaling? With a max dimension of 640px?
We are going to be launching a blog post tomorrow that might give a clearer indication for where we were going with this preliminary research. Stay tuned!
I meant, why not just worry about the best display for content itself?
Example: I build a 2-column email at 640px wide by default, but on a browser with a resolution below 640px, the email would re-flow into a single column. This way, I never have to worry about future device screen sizes.
I’m not sure what the stats show about this, so it’s just an assumption on my end.
My tests:
– iPhone 4 on iOS 6.1.3 : 320
– Galaxy S2 on Android 4.12 : 320
– Lumia 920 on WindowsPhone 8 : no text in red
I tried the media query test on my Samsung Galaxy S 4 (OS v 4.2.2) and I got 1600 px on both height and width using the default email client. I tested one of the EOA responsive templates and it doesn’t appear to respond to the media queries, because the email runs off the screen.
S4 is not supporting device- media-queries in emails, and returning a 1600px as plain width.
Don’t ask me why… #gotohellyousamsung