50

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

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

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

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

提前致谢！

4

7 回答 7

72

您还想添加最大比例

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

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

<meta name="viewport" content="width=device-width, initial-scale=1">
于 2012-06-24T22:08:30.160 回答
15

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

于 2012-09-17T20:03:46.350 回答
11

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

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

于 2014-12-05T08:08:02.450 回答
3

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

于 2015-04-03T10:03:04.470 回答
2

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
于 2013-10-16T12:36:27.420 回答
1

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

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

js解决方案没有用

于 2014-07-02T12:35:48.820 回答
1

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

这对我有用。

于 2018-12-10T12:06:32.300 回答