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

Question

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

响应式设计在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">

更新我同意一些评论,声明不应该限制用户的缩放,因为这是不好的做法.下面是一个更好的方法,我相信缩放错误早已被Apple修复.

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

出于可访问性原因,防止缩放是不好的做法.请参阅minneapolisdan的答案以获得更好的解决方案.你可以在这里阅读更多内容:http://alwaystwisted.com/post.php？s = 2013-01-10-dont-do-this-in-responsive-web-development (18认同)
尝试:<meta name ="viewport"content ="width = device-width; initial-scale = 1.0; maximum-scale = 1.0; user-scalable = 0;" /> (3认同)
防止缩放不是坏习惯。良好的响应式设计的行为就像iPhone上的应用程序一样，您无法放大应用程序。就像您从没有缩放的站点获得的真实感觉一样。这是最好的答案。 (2认同)

Answer 2

将最大比例设置为"1"确实有效,但它会限制用户放大网站中的任何内容.不适合用户体验.试试这个Javascript,iOS-Orientation Change Fix

Answer 3

设置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%;
}

此方法不会阻止用户放大您的网站,但会确保浏览器不会自动调整文本大小.