Landscape Orientation

[Historical Forums User]

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!!

[joshuanhibbert]

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.

[chrisburton]

This what you’re referring to?

[joshuanhibbert]

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.

[Thoven78]

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

@media  (max-device-width: 480px) and (orientation: landscape) {}

[Author]

Posts