Responsive site is zoomed in when flipping between Portrait and Landscape on iPad/iPhone

Question

I've built a responsive site using Twitter Bootstrap here: http://zarin.me/cce/

The responsive design works great on iPad and iPhone, however when I flip the device from portrait to landscape, the site is zoomed in instead of adapting to the screen (pinching the screen works).

What am I missing? Is this a viewport issue? Here's the only viewport code I have in my :

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

Thanks in advance!

Answer 1

You also want to add the maximum scale

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

UPDATED I agree with some of the comments, the declaration should not limit the scaling by the user as this is bad practice. The below is a better approach and I believe that the zooming bug has long since been fixed by Apple.

<meta name="viewport" content="width=device-width, initial-scale=1"> 

Answer 2

While setting the maximum scale to "1" does work, it restricts your users from zooming in on anything within your site. Not ideal for user experience. Try this Javascript instead, iOS-Orientation Change Fix