If I have css 3 media query for max-device-width does this change when the orientation of the device changes?
For example if an iPhone goes from portrait to landscape does the max-device-width change?
Add a comment
|
2 Answers
This differs from iPhone, iPad etc to other devices. With Apple products, the device-width values remain the same, but with other devices changing the orientation could cause alternative rules to apply.
The most reliable way to do this is to use min/max-width instead of min/max-device-width. These are dependent on the size of the viewport, and are consistent across devices.
4 Comments
Chris Muench
Are you staying that max-device-width is not reliable on other platforms and are recommending NOT to use this? What is your source for this information?
@ChrisMuench I am saying
max-device-width is not consistent across devices when looking at orientation changes. With iPad, iPhone etc, orientation changes do not affect the device-width, whereas with other devices this is the case. My source for this is experience, you can test it yourself if you make a page and try orientation changes on an iPad and a Kindle.Chris Muench
Got it, thats the way I understood device-width also. It is a constant no matter what the orientation is, but different between devices.
@ChrisMuench I think I might have miscommunicated a bit. The
device-width is only constant on the iPad, iPhone. Regardless of which way you turn an Apple device, the device-width is the same. On other devices, however, it changes when you change the orientation of the device.It doesnt change the orientation
@media screen and (orientation:portrait) {
/* Portrait styles */
}
@media screen and (orientation:landscape) {
/* Landscape styles */
}
1 Comment
Zoltan Toth
The useful thing about device-width in the viewport meta tag is that it updates when the user changes the orientation of their smartphone or tablet. Google Webmaster Central
