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

Posted 2023-03-12

【中文标题】调整网站宽度以适应 iPad 屏幕的宽度

【英文标题】：Resize site width to fit within width of iPad screen

【发布时间】：2013-02-15 20:14:50

【问题描述】：

我有一个 2048 像素宽的网站。有没有办法在网站加载时自动让 iPad 适应屏幕上的整个网站宽度？我尝试了几种不同的方式来试验元视口：

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

但这并没有奏效。该网站仍然太宽，在 iPad 上会溢出屏幕。

【问题讨论】：

确保使用逗号分隔例如width=device-width 和 maximum-scale=1.0.

谢谢。不过还是没有骰子。

这些视口属性意味着 Safari 允许响应式设计工作，而不是缩小页面以允许整个宽度在 iPad 屏幕上可见。他们不会做的是覆盖应用于页面的 CSS 样式 - 如果包装器或主体具有固定宽度，它不会改变它。尝试使用 Adob​​e Edge Inspect html.adobe.com/edge/inspect 查看 iPad 上应用了哪些样式。如果可以，请在您的问题中包含包装器 CSS 样式。

我想缩小页面以允许整个宽度在 iPad 屏幕上可见。我将如何做到这一点？

ios 上的 AFAIK Safari 默认会执行此操作，除非您有这些元标记。这样做的缺点是，通过缩小，用户通常必须缩放和滚动才能在页面中导航。宽度元标记会覆盖此默认行为，以允许使用响应式设计 (alistapart.com/article/responsive-web-design)，其中特定的 CSS 样式属性应用于特定宽度或在特定宽度之间。响应式网页设计的一个关键部分是使用百分比而不是固定宽度，在视口调整大小和内容“中断”时使用特定规则调整布局。关键，使用百分比。

【参考方案1】：

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

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

可能需要进行一些调整以允许在任一侧进行填充，但应以该大小加载网站并允许用户放大。

【参考方案2】：

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

这就是我用于我的网站的内容。

【讨论】：

你能提供一个活生生的例子吗？ 编辑：此网站是否可以在您的 iPad 上运行：v1k.org？

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

抱歉，因为它是受保护的客户端站点，所以不能这样做。

我的最小比例=1.0，最大比例=1.0。然后我添加了 initial-scale=1.0 并像魅力一样工作。谢谢。

【参考方案3】：

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

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

【参考方案4】：

尝试将min-width: 2048px; 设置为css 中的html 和body 标签。这为我解决了 iPad 上的一些奇怪问题，但不确定它是否适用于这个。

【讨论】：

除非这个网站是专为在大屏幕设备上使用而设计的，否则这种方法会在小屏幕设备上引起严重的可用性问题（和大量滚动）——尤其是移动设备。考虑响应式网页设计 (alistapart.com/article/responsive-web-design) 以允许您的网站内容适应不同的视口大小，或者如果您必须使用固定宽度，则使用代表大多数网站访问者的宽度（使用 Google Analytics 之类的东西来确定这一点）。对所有用户强制使用非常高或非常低的宽度会给许多用户带来糟糕的用户体验。

他的站点宽度是 2048... 我认为可用性已经是一个问题。我认为设置宽度不会使事情升级。响应式总是一个更好的答案，但这不是他所要求的。

【参考方案5】：

我最近在一个有同样问题的网站上工作，对于固定的 960 像素宽度的网站，它不会在页面点击之间保持缩小。试试：

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

到目前为止一切顺利，通过我的 Ipad Air。

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