在iPad / iPhone上纵向和横向之间翻转时，响应式网站会放大

我在这里使用Twitter Bootstrap构build了一个响应式网站：http: //zarin.me/cce/

响应式devise在iPad和iPhone上效果很好，但是当我将设备从纵向翻转到横向时，网站被放大而不是适应屏幕（捏住屏幕）。

我错过了什么？ 这是一个视口问题吗？ 这是我在我的唯一的视口代码：

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

提前致谢！

Answer 1

您还想要添加最大比例

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

Answer 2

尽pipe将最大比例设置为“1”确实有效，但会限制用户放大站点内的任何内容。 不理想的用户体验。 试试这个Javascript，而不是iOS的方向更改修复

Answer 3

在meta中设置initial-scale=1.0 ：

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

然后设置-webkit-text-size-adjust:100%; 在CSS中：

 body { -webkit-text-size-adjust: 100%; } 

这种方法不会阻止用户放大您的网站，但会确保文本不会被浏览器自动resize。

Answer 4

以下为我工作，并允许用户放大

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

Answer 5

在Ipad 3和IOS 7.1.2上恰好有这个问题

使用最大比例= 1固定它，并允许缩放

JS的解决scheme没有工作

Answer 6

当页面上的一个容器溢出100％时，我已经看到了这种情况。 该页面在初始方向上显示为ok，但方向改变时，额外的宽度会以某种方式变得有效，从而导致页面缩放，并且通常在左侧或右侧留下边距。 值得检查所有的媒体查询，以确保没有一些尾部填充或保证金。