Question

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

@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的视口，但我必须水平滚动才能看到页面的其余部分。

我需要做的就是在视口内部扩展网站，这样我就不必滚动查看页面的其余部分了。我很好，视口中有剩余空间，但我不能让它过度扩展视口。

有谁知道如何扩展2560px到1440px的网站以适应iPad的视口？该网站的尺寸设置为适合用作展会信息亭的2560像素×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;
}

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

我不能修改宽度，因为它是绝对定位。

更新

我找到了解决问题的方法。显然iPad没有采用我的@viewport值，所以我下载了x-code和测试过的标签。除了网页底部的一些间距（为了在iPad上保持4：3的宽高比），网页现在非常适合iPad的视口。

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

Answer 1

您需要将元视口设置为您想要的大小，例如：

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

但谷歌已经说固定视口是一种不好的方法，你应该使用“设备宽度”。然后让网站响应。

information about web master tools update

Answer 2

尝试width: 100%;代替width: device-width;

示例：

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

如何将固定宽度的网站缩放到iPad视口

2 个答案: