orientation - 在 iPad/iPhone 上在纵向和横向之间切换时响应站点被放大

Question

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

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

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

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

提前致谢！

score 72 · Accepted Answer

您还想添加最大比例

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

更新我同意一些评论，声明不应该限制用户的缩放，因为这是不好的做法。下面是一种更好的方法，我相信苹果早就修复了缩放错误。

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

score 15 · Accepted Answer

虽然将最大比例设置为“1”确实有效，但它会限制您的用户放大您网站内的任何内容。不适合用户体验。试试这个 Javascript，iOS-Orientation Change Fix

score 11 · Accepted Answer

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

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

score 3 · Accepted Answer

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

score 2 · Accepted Answer

以下对我有用，并允许用户放大

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

score 1 · Accepted Answer

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

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

js解决方案没有用

score 1 · Accepted Answer

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

这对我有用。

7 回答 7