Tablets/Mobiles and responsive design

[Keleth]

So one of my recent assignment was to create a responsive design for an already existent site. It was no big deal, I made CSS media queries, got it working nicely (enough) scaling from 1920 in width down to 320, accommodating for iPads and iPhones (on both portrait and landscape orientations).

The issue came up when i started the tablet/mobile testing. When I loaded a page on a device, it looked ok, and when I rotated the device from portrait to landscape, the page resized... but zoomed. I had to pinch zoom out to max size to get it to show up properly. It recorded the right dimensions, and the correct CSS was loaded, but it was zoomed in.

I tested out one of the sites the client was using to show us what they wanted (Maxim), and I noticed their site doesn't have that issue. I'm wondering if anyone has experience in development for tablet/mobile devices and might have thoughts as to how I can fix it. It only does it from portrait to landscape, maintaining showing 768px width, then forcing me to zoom out to 1024px. Since landscape to portrait shrinks it, it sizes fine. Do I have to give the body an explicit width? Is there a meta tag I'm not aware of that's necessary?

[Sammy12]

Originally Posted by Keleth

Do I have to give the body an explicit width?

Maybe width: 100%? I think the mobile device would render everything based on the portrait mode's dimensions.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

http://chrissilich.com/blog/prevent-...evice-rotates/

There is also:

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

http://css-tricks.com/snippets/css/m...ndard-devices/

[Keleth]

Some research and I found out it can only be done (as far as I see) by disabling zooming with the viewport meta tag. So if you can't zoom, the system won't try to keep it at its previous zoom "level", and will just fit to max size.