html - 如何将固定宽度的网站缩放到 iPad 视口(viewport)

Question

我需要能够将 2560 像素宽的网站放入 iPad 的视口(viewport)中。我目前有

@viewport { 
  width: device-width; 
  max-zoom: .15; 
  orientation: landscape;
}
@-ms-viewport { 
  width: device-width; 
  max-zoom: .15; 
  orientation: landscape;
}
@-o-viewport  {
  width: device-width; 
  max-zoom: .15; 
  orientation: landscape;
}

并将其缩放到 iPad 的视口(viewport)，但我必须水平滚动才能看到页面的其余部分。

我需要做的就是在视口(viewport)内缩放网站，这样我就不必滚动来查看页面的其余部分了。我可以接受视口(viewport)中剩余的空间，但我不能让它过度扩展视口(viewport)。

有谁知道如何缩放 2560 像素 x 1440 像素的网站以适合 iPad 的视口(viewport)？该网站的尺寸设置为适合用作贸易展亭的 2560 像素 x 1440 像素显示器。

提前感谢您的帮助!

编辑:

我已经将我的 CSS @viewport 更新为:

@viewport { 
  width: 2560px;
  height: 1440px;
  zoom: .05; 
  orientation: landscape;
}
@-ms-viewport { 
  width: 2560px;
  height: 1440px;
  zoom: .05; 
  orientation: landscape;
}
@-o-viewport  {
  width: 2560px;
  height: 1440px;
  zoom: .05; 
  orientation: landscape;
}
@-webkit-viewport  {
  width: 2560px;
  height: 1440px;
  zoom: .05; 
  orientation: landscape;
}
@-moz-viewport  {
  width: 2560px;
  height: 1440px;
  zoom: .05; 
  orientation: landscape;
}

我当前配置的唯一问题是我的视口(viewport)中有大约 50-100 像素的页面溢出。所以，我必须向右滚动才能查看网页的其余部分。我希望能够将整个网页放入视口(viewport)，即使在视口(viewport)和我的网页之间有空间。

我无法修改宽度，因为它都是绝对定位。

更新:

我找到了解决问题的办法。显然 iPad 没有采用我的 @viewport 值，所以我下载了 x-code 并测试了标签。除了网页底部的一些间距(以在 iPad 上保持 4:3 的纵横比)之外，该网页现在非常适合 iPad 的视口(viewport)。

<meta name="viewport" content="width=2560, height=1440, initial-scale=.40, user-scalable=no">

Answer 1

您需要将元视口(viewport)设置为您想要的大小，例如:

<meta name="viewport" content="width=2560,height=1440, initial-scale=1">

但是 Google 表示固定视口(viewport)是一种糟糕的方法，您应该使用“设备宽度”然后让网站响应。

information about web master tools update