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

Posted 2021-03-28

我的网站宽度为2048像素。有没有办法在网站加载时自动让iPad适合屏幕上的整个网站宽度？我尝试过以几种不同的方式尝试使用meta视口：

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

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

答案

您可以将固定大小传递给内容宽度，如下所示：

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

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

另一答案

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

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

另一答案

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

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

另一答案

尝试将min-width: 2048px;设置为css中的html和body标签。这对我来说固定在iPad上的一些奇怪之处，但不确定它是否适用于这个。

另一答案

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

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

到目前为止这么好，通过了我的Ipad Air。

另一答案

这很好用：

<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">