Treehouse: Grow your CSS skills. Land your dream job.

Landscape Orientation

  • # August 30, 2011 at 12:41 am

    Hey all,

    So I’m working on my own website and wanting to make it tablet and mobile friendly. I have the portrait ok, but once I go to landscape on my iPad or iPhone it zooms in and then I can only see a portion of the page. Now I’m assuming this is the case because I have the height to 100% (it’s a horizontal scrolling site). So I was like alright I will just call it using media queries. However the media query

    @media screen and (min-device-width: 321px) and (max-device-width: 480px) {}

    does not change the layout. Now I found that this is most likely due to the viewport and mobile safari automatically sees the width to 980px. However when I change the view port to be width=device-width or something along those lines it zooms in and won’t let me zoom out. Should I just detect the orientation some where else (JS or PHP) that call that specific code? Any tips regarding this?

    Thanks!!

    # August 30, 2011 at 1:11 am

    Actually, I remember reading somewhere that it was how the software was set up on iPhones/iPads, so I don’t think there is much you can do about it at this stage. If I find the article I will link it here.

    # August 30, 2011 at 1:24 am

    This what you’re referring to?


    # August 30, 2011 at 1:43 am

    It sounds like you also have maximum-scale=1.0, user-scalable=no set if you can’t zoom out, which you may want to remove as they are bad for accessibility.

    # August 30, 2011 at 10:49 am

    I believe I tried this but not 100%. I know I didn’t have the user scallable turned off. However I think its because the height is set to 100%. So when I change to landscape it zooms in then cuts off half the page. Now that I think more about it because I have overflow set to none and with the 100% height. On a device (iPhone and iPad) it cuts it off and won’t let me scroll. So I believe I may just have to use @media to call the iPad max-device-width and turn off overflow, since it seems they don’t recognize the overflow property when its on a container or body. I will try this later today.

    # August 30, 2011 at 11:31 am

    Or you can try this to see if it solves your problem.


    @media (max-device-width: 480px) and (orientation: landscape) {}
    # August 30, 2011 at 3:11 pm

    @Thoven78 Bingo! I used both those separately but not in the same line. That was what I needed to fix it. I appreciate your help!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.