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

Posted 2023-03-31

【中文标题】在 iPad/iPhone 上在纵向和横向之间切换时响应站点被放大

【英文标题】：Responsive site is zoomed in when flipping between Portrait and Landscape on iPad/iPhone

【发布时间】：2012-06-22 23:35:49

【问题描述】：

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

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

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

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

提前致谢！

【参考方案1】：

您还想添加最大比例

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

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

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

【讨论】：

尝试：

出于可访问性的原因，防止缩放是不好的做法。请参阅明尼阿波利斯丹的答案以获得更好的解决方案。你可以在这里阅读更多：alwaystwisted.com/…

防止缩放是不错的做法。一个好的响应式设计就像 iphone 上的一个应用程序，你不能放大一个应用程序。真的很喜欢您从没有缩放的网站获得的坚实感觉。这是最好的答案。

其实在 Safari 上你可以在 OSX 上放大。

@Starkers — 在可访问性方面，防止缩放是不良做法的定义。为什么还会存在缩放？我有 20/20 的视力，但仍然发现自己在移动浏览器中放大文本，通常是因为两个链接位置太近。我们在这里不是在谈论本机应用程序。我们谈论的是排版繁琐、文字大小千差万别以及 UI 元素争夺空间的网站。为什么任何开发人员会为了让他们的生活更轻松而禁用此功能，这对我来说是个谜。

【参考方案2】：

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

【讨论】：

这很好用，并且可以在之后进行缩放。为它+1！不过，出于几个原因，我选择了maximum-scale。一，这是js依赖的。第二，允许缩放以与我一开始试图阻止的相同方式破坏布局。我希望由于它是响应式设计，用户无论如何都不应该缩放。不错的解决方案！

这是一个很好的例子，但在我的情况下，当我翻转我的 Ipad @minneapolisdan 时，JS 无法工作水平滚动

【参考方案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%;

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

【讨论】：

遇到了一个问题，iPhone 5 忽略了 iframe 中的视口元数据，导致横向模式下的 iframe 放大。但此修复对文本大小进行排序（也在 CSS 按钮中）。

这是最好的（也是最简单的）解决方案。没有其他工作。

我没有任何 iphone 或 ipad。我在 windows 上的 chrom 中对其进行了测试，并将开发工具设置为 ipad，我发现了这个问题，这个答案对我有帮助。

【参考方案4】：

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

【讨论】：

感谢您提出这一点。我的页面上有一个不可见的画布，它没有在旋转时调整大小，这导致了这个问题。

【参考方案5】：

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

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

【讨论】：

恐怕这对我不起作用，请注意我正在 iPad v 5.1 上进行测试，显然这个错误已在 6.1+ 中修复

为我解决了它被缩小，而不是放大，作为 OP 的问题。

【参考方案6】：

在 Ipad 3 和 IOS 7.1.2 上遇到过这个问题

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

js的解决方案没有用

【参考方案7】：

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

这对我有用。