在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">

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" />

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

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

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

Answer 4

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

Answer 5

以下适用于我并允许用户放大

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

Answer 6

在Ipad 3和IOS 7.1.2上确实存在这个问题

使用maximum-scale = 1修复它并允许缩放

js解决方案不起作用

Answer 7

如果您主要在iPhone-X中遇到问题，请尝试<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />

这对我有用。