调整网站宽度以适应iPad屏幕的宽度

Question

我有一个宽度为2048像素的网站。加载网站时，有没有一种自动让iPad屏幕适应整个网站宽度的方法？我已经尝试了几种不同的meta viewport实验：

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

不过这并没有奏效。在iPad上，网站仍然太宽，超出了屏幕的范围。

- Tim Jahn

---

请确保使用逗号分隔，例如 width=device-width 和 maximum-scale=1.0。 - bdesham

谢谢。不过还是不行。 - Tim Jahn

这些视口属性意味着Safari允许响应式设计正常工作，而不是缩小页面以便在iPad屏幕上显示整个宽度。它们不能覆盖应用于页面的CSS样式 - 如果包装器或body有固定宽度，它将不会更改它。尝试使用Adobe Edge Inspect http://html.adobe.com/edge/inspect/查看在iPad上应用了什么样式。如果可能，请在您的问题中包括wrapper CSS样式。 - pwdst

我想缩小页面，以便在iPad屏幕上可以看到整个宽度。我该如何实现这一点？ - Tim Jahn

据我所知，除非您有这些元标记，否则iOS上的Safari将默认执行此操作。这样做的缺点是，通过缩小页面，用户经常不得不缩放和滚动来浏览页面。宽度元标记覆盖了此默认行为，允许使用响应式设计（http://alistapart.com/article/responsive-web-design），在特定宽度或宽度之间应用特定的CSS样式属性。响应式Web设计的关键部分是使用百分比而不是固定宽度，根据视口大小调整布局并使内容“断开”的特定规则。关键是使用百分比。 - pwdst

Answer 1

您可以像这样将固定大小传递给内容宽度：

<meta name="viewport" content="width=2048" />

也许需要进行一些调整以允许两侧的填充，但应该以这个尺寸加载网站并允许用户放大缩小。

- jjgrainger

Answer 2

正确的解决此问题的方法是使用百分比而不是固定宽度。但如果您“无法”更改它，您可以通过在initial-scale中使用0.x来强制缩小视口：

<meta name="viewport" content="width=device-width, initial-scale=0.625, user-scalable=yes" />

- steffanjj

Answer 3

这是我网站使用的代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

- Vlad

---

你能提供一个实时的例子吗？编辑：这个网站在你的iPad上能用吗：https://v1k.org/？ - Vlad

你可以查看我的HTML源代码。我只是使用了我回答中提供的元代码。你介意给我一个你网站的链接吗？ - Vlad

抱歉，由于这是一个受保护的客户端网站，我们无法提供。 - Tim Jahn

我最初的设置是minimum-scale=1.0, maximum-scale=1.0。然后我添加了initial-scale=1.0，效果非常好。谢谢。 - reinaldoluckman

Answer 4

最近我在处理一个类似的网站问题，即在固定960像素宽度的网站上，在页面之间缩放比例不能保持不变。尝试以下方法：

<meta name="viewport" content="width=device-width, initial-scale=-100%" />

目前为止很好，已在我的iPad Air上通过。

- britter

Answer 5

尝试在 CSS 中为 HTML 和 BODY 标签设置 min-width: 2048px;。这种方法以前曾经解决过我在 iPad 上遇到的一些问题，但不确定是否适用于此情况。

- Sean

---

除非此网站仅设计用于大屏幕设备，否则这种方法将在较小屏幕的设备上（尤其是移动设备）导致重大的可用性问题和大量滚动。考虑使用响应式Web设计（http://alistapart.com/article/responsive-web-design）使您的网站内容适应不同的视口大小，或者如果必须使用固定宽度，则使用大多数访问者的代表性宽度（使用类似Google Analytics的工具来确定）。强制所有用户使用非常高或低的宽度将为许多用户提供糟糕的用户体验。 - pwdst

他的网站宽度为2048...我认为可用性已经成为一个问题。我不认为设置宽度会使事情恶化。响应式设计始终是更好的选择，但这不是他所问的。 - Sean

Answer 6

这个很好用：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

- Cubiczx