Is there a way to make a page load in "Landscape mode" as default when viwed on mobile?

by LuxMan
3 replies
  • WEB DESIGN
  • |
I designed a page that looks a lot better when viewed in landscape mode, rather than portrait.

Is there a way to make the page load with landscape as default?

thanks!
#default #landscape mode #load #make #mobile #page #viwed
  • Profile picture of the author MrMonetize
    I would suggest learning CSS Media Queries, learn how to build a responsive design that will display correctly no matter what device its been viewed on.
    {{ DiscussionBoard.errors[6830717].message }}
  • Profile picture of the author clickbump
    Originally Posted by LuxMan View Post

    I designed a page that looks a lot better when viewed in landscape mode, rather than portrait.

    Is there a way to make the page load with landscape as default?

    thanks!
    The view is determined by the person holding the device. Although CSS media queries will allow you to determine the specific conditional CSS rules to use when the device is viewed in landscape view, you cannot force the view to landscape. Its a matter of physics, not software.

    In other words, is the device currently in landscape orientation or portrait orientation? You can query that property and apply css accordingly, however, you cannot make the view portrait when in reality it is landscape (or vice versa).
    Signature
    {{ DiscussionBoard.errors[6830929].message }}
  • Profile picture of the author Jay Moreno
    its not best practice to do this but if you really want to go down that route...

    detect the screen orientation using jquery or similar and if its in portrait mode have it display an overlay div that blocks the content and says something like "best viewed in landscape view".... and then of course when you rotate it to landscape it removes the overlay div...

    hope that makes sense

    cheers

    jay
    Signature
    Sorry, I am too busy helping people to think of a cool signature!
    {{ DiscussionBoard.errors[6831462].message }}

Trending Topics