: How to change website on device orientation change? This question is in the context of a previous one but I think deserves another thread on its own. Being able to detect user agent and serve

@Speyer207

You can work around this problem by being more specific on your media queries. Landscape and Portrait is unreliable and often not specific enough as you know and causes problems. To overcome this problem your code should be more specific and sadly this means writing more code. Sadly it's easily to write a website on width alone than it is both or just vertically.

Example coding for both landscape and portrait devices

Please note the below code is merely an example, you may need to add even more code for more specific devices.

/* Mobiles Portrait & Landscape */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}

/* Mobiles (Landscape) */ @media only screen and (min-width : 321px) {}

/* Mobiles Portrait */ @media only screen and (max-width : 320px) {}

/* iPads Portrait & Landscape */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}

/* iPads Landscape */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}

/* iPads Portrait */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}

/* Desktops & Laptops */ @media only screen and (min-width : 1224px) {}

/* Desktops with Large Screens */ @media only screen and (min-width : 1824px) {}

/* iPhone 4 */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {}

Vote Up Vote Down