2

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 mobile or desktop version is good, but is there also a way to detect orientation to serve website version when orientation changes? For example on large mobile devices in landscape orientation and width 1024px or more, I want to show the desktop version, but if put on portrait orientation, I want to serve the mobile version.

In summary

  • desktop: landscape website layout
  • mobile-large-landscape: landscape
  • website layout mobile-large-portrait: portrait website layout
  • mobile-small-landscape: portrait website layout
  • mobile-large-landscape: portrait website layout

Conventionally, this can be solved by using media queries and responsive design. However, the landscape and portrait websites have very little similarities, so it is easier to create both sites from scratch.

Improve this question

1 Answer 1

Reset to default
1

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) {}
Improve this answer
2
  • But this is still applying CSS on the same HTML structure. However, if the 2 versions are very dissimilar, then this approach may be more complex than having 2 separate websites. In that case, is it still possible to serve the versions based on change in orientation?
    – Jake
    Commented Jul 2, 2014 at 16:37
  • Out of personal experience orientation is highly unreliable and your better of using min-width to detect what device is being used. Another example is the iPhone 4... this operates at 640x960 so by that we know that landscape is 640 and portrait is 960px which is shared with the average tablet resolution of 1024. So the page should look the same in landscape on the iphone that it does on a common pad. Another problem with orinential is unless your not using a max-width the page will look differently because of the resolutions differ across multiple devices.
    – Simon Hayter
    Commented Jul 2, 2014 at 17:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.