16 {{ upvoteCount | shortNum }}
16 {{ upvoteCount | shortNum }}

(Wordpress) How can I force mobile visitors to view my site horizontally only?

by sam770
12 replies
  • WEB DESIGN
    • |
Hey folks,
I have a wordpress site with a responsive theme.
Although its supposed to be fully responsive - I realized that when it's viewed by phones in a vertical position (android/iphone) it simply looks terrible.
But when viewed horizontally - it looks great.

So my simple question - does anyone knows of a WP plugin (or maybe other "trick") that will display my wordpress site (to my mobile visitors) only horizontally and not vertically?

I know that there are many android and iphone applications that will load only horizontally, but what about a wordpress site?


Sam
#force #horizontally #mobile #site #view #visitors
  • Profile picture of the author BenjaminEdwards
    Originally Posted by sam770 View Post

    Hey folks,
    I have a wordpress site with a responsive theme.
    Although its supposed to be fully responsive - I realized that when it's viewed by phones in a vertical position (android/iphone) it simply looks terrible.
    But when viewed horizontally - it looks great.

    So my simple question - does anyone knows of a WP plugin (or maybe other "trick") that will display my wordpress site (to my mobile visitors) only horizontally and not vertically?

    I know that there are many android and iphone applications that will load only horizontally, but what about a wordpress site?


    Sam
    Where is your site? Are you using a responsive framework?
    {{ DiscussionBoard.errors[8467990].message }}
  • Profile picture of the author ronrule
    Don't force your visitors into a different mode, fix your site.
    Signature

    -
    Ron Rule
    http://ronrule.com

    {{ DiscussionBoard.errors[8468002].message }}
    • Profile picture of the author sam770
      I WANT my visitors to view it horizontally only!
      I Will appreciate an answer to my question, not a non relevant suggestions
      Thanks

      Originally Posted by ronrule View Post

      Don't force your visitors into a different mode, fix your site.
      {{ DiscussionBoard.errors[8468046].message }}
  • Profile picture of the author ronrule
    The answer is "you can't do that". You could specify a minimum screen width, but they can still view it in portrait mode, they just either won't be able to see it or will have to scroll (which one depends on your view port setting). But there is no way to make the site render sideways based on screen orientation.

    You can't do what you want to do in a browser. Fix your theme.
    Signature

    -
    Ron Rule
    http://ronrule.com

    {{ DiscussionBoard.errors[8468428].message }}
    • Profile picture of the author sam770
      Could you please explain to me how come that there are so many applications, both for iphone as well as for android, that the user can use ONLY horizontally?
      Why it wont be possible with a phone's browser while it's definitely possible with applications?
      Thanks

      Originally Posted by ronrule View Post

      The answer is "you can't do that". You could specify a minimum screen width, but they can still view it in portrait mode, they just either won't be able to see it or will have to scroll (which one depends on your view port setting). But there is no way to make the site render sideways based on screen orientation.

      You can't do what you want to do in a browser. Fix your theme.
      {{ DiscussionBoard.errors[8468688].message }}
      • Profile picture of the author ronrule
        Originally Posted by sam770 View Post

        Could you please explain to me how come that there are so many applications, both for iphone as well as for android, that the user can use ONLY horizontally?
        Why it wont be possible with a phone's browser while it's definitely possible with applications?
        Thanks
        I don't know, can you explain how come you have an attitude towards the only person who's actually trying to help you? :rolleyes:

        An app can be coded to do whatever you want it to do. A browser can't.
        Signature

        -
        Ron Rule
        http://ronrule.com

        {{ DiscussionBoard.errors[8469102].message }}
        • Profile picture of the author sam770
          Thanks you

          Originally Posted by ronrule View Post

          I don't know, can you explain how come you have an attitude towards the only person who's actually trying to help you? :rolleyes:

          An app can be coded to do whatever you want it to do. A browser can't.
          {{ DiscussionBoard.errors[8470402].message }}
  • Profile picture of the author mojojuju
    What an interesting question!

    I think I'd start by figuring out the user's viewport size and if it's taller than it is wide, I guess you could conclude that the phone is being used in portrait mode.

    So, if you've determined that the phone is being held in portrait mode, then I guess that's when you'd "force" the page to render in landscape mode....

    If you had to do something like that, I think what I'd investigate is CSS transform property. Here's an example of what you can do with that Edit this Fiddle - jsFiddle

    Whatever you're doing, and for whatever reason, it looks like it will be a challenge. Have fun.
    Signature

    :)

    {{ DiscussionBoard.errors[8470489].message }}
    • Profile picture of the author ronrule
      Originally Posted by mojojuju View Post

      What an interesting question!

      I think I'd start by figuring out the user's viewport size and if it's taller than it is wide, I guess you could conclude that the phone is being used in portrait mode.

      So, if you've determined that the phone is being held in portrait mode, then I guess that's when you'd "force" the page to render in landscape mode....

      If you had to do something like that, I think what I'd investigate is CSS transform property. Here's an example of what you can do with that Edit this Fiddle - jsFiddle

      Whatever you're doing, and for whatever reason, it looks like it will be a challenge. Have fun.
      I thought about that as a solution, the only problem with it is that it's still going to be a wide format that's either "zoomed out" to fit the screen, or fixed-width with some elements off to the side.

      Truth be told if we were only dealing with iPhones, this would be fairly easy - there are only 3 resolutions to support (iPhone, iPad, and iPad Mini). You could create one stylesheet if the resolution is less than the fixed-width resolution of those devices, which throws z-indexed div on top of everything telling you to turn your phone sideways, and then once sideways the other stylesheet would take priority.

      But that wouldn't work for Android, Windows, Blackberry, or any other devices because they all have different widths. For some slim smartphones, the "landscape" width is less than the "portrait" width on a large-screen device like the Galaxy Note or a small tablet. And the stylesheets won't refresh automatically, so when you turn it sideways you would still just see a screen that says "Turn me sideways" unless they refresh the page after they've done it.

      In both cases, it's a surefire way to annoy your visitors. Although forcing this is an extraordinarily bad idea, one less intrusive way would be to throw in a div with contents that read something like "Turn your device sideways to experience the full content of this site" and put it near the top of the page. Then use a stylesheet for any resolutions less than your recommended width that show this div above your content, and a separate one for resolutions above that width that hide that div. In this scenario the page will still load, but there's a visible "note" that tells them they'll have a better experience by switching to landscape mode which won't be seen if their resolution is adequate. But either way it's a hack... the best way is still to fix the theme.
      Signature

      -
      Ron Rule
      http://ronrule.com

      {{ DiscussionBoard.errors[8471915].message }}
      • Profile picture of the author cyber49
        We have a WP site that works great in mobile, but we have a handful of schedule pages that look poor when held vertically...

        They smooth out nicely when turned, but we have actually had support tickets from people too dumb to turn their phone sideways I guess, and it doesn't scroll well... Therefore, I'm looking for a way to force it for certain URLs - not technically possible?
        {{ DiscussionBoard.errors[8924509].message }}
        • Profile picture of the author ronrule
          Originally Posted by cyber49 View Post

          We have a WP site that works great in mobile, but we have a handful of schedule pages that look poor when held vertically...

          They smooth out nicely when turned, but we have actually had support tickets from people too dumb to turn their phone sideways I guess, and it doesn't scroll well... Therefore, I'm looking for a way to force it for certain URLs - not technically possible?
          No, but if you know what those pages are you could use a little dynamic CSS and show them a note or an image that tells them to rotate their device to see the full page.
          Signature

          -
          Ron Rule
          http://ronrule.com

          {{ DiscussionBoard.errors[8924532].message }}
  • Profile picture of the author tks
    Just add this code, this will improve mobile user experience a lot, they will be able to read your content without zooming/resizing.
    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    Suggestion from Google, for Android and other mobile devices.
    Signature
    Cloud Computing
    Android Project Ideas
    {{ DiscussionBoard.errors[8924520].message }}

Trending Topics