However, similar to disabling the scrollbars, this technique takes control away from the user and should only be used for a good reason. Additionally, it is possible to add certain styles based on the device orientation. This means that different styles can be applied depending on whether the user is holding their phone vertically or horizontally. To detect the device orientation, we can use a media query similar to the client-side device detection we discussed earlier. Within your stylesheet, include: @import url("portrait.css") all and (orientation:portrait); @import url("landscape.css") all and (orientation:landscape);
Here portrait.css styles will be added for vertical devices and the landscape.css will be added for horizontal. However orientation media queries have not been adopted by all devices, so this is best accomplished with the max-width media query. Simply apply different max-width queries for the different orientation widths you want to target. This is a much more robust approach, since presumably the reason to target different orientations is to style for different widths.
Smashing eBook #27│Essentials Of Mobile Design│ 39