如何将固定宽度的网站缩放到iPad视口 [英] How to scale a fixed-width website to an iPad viewport

问题描述

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

I need to be able to fit a 2560px wide website into an iPad's viewport. I currently have

@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的视口，水平地看到页面的其余部分。

and it scales it to the viewport of the iPad, but I have to scroll horizontally to see the rest of the page.

所有我需要做的是缩放视口内的网站，所以我不必滚动看到其余的的页面。

All I need to do is scale the website inside of the viewport so it I don't have to scroll to see the rest of the page. I'm okay with there being space leftover in the viewport, but I can't have it overextending the viewport.

有人知道我可以如何缩放2560像素×1440像素的视频吗？网站，以适应iPad的视口？

Does anyone know how I can scale a 2560px by 1440px website to fit in an iPad's viewport? The website's dimensions were set to fit a 2560px by 1440px monitor used as a tradeshow kiosk.

感谢您提前的帮助！

编辑：

我已将CSS @viewport更新为：

I've updated my CSS @viewport to:

@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的页面runover在我的视口。所以，我必须向右滚动才能查看网页的其余部分。即使视口和我的网页之间有空间，我也希望能将整个网页放入视口。

The only problem with my current configuration is I have about 50-100px of page runover in my viewport. So, I have to scroll to the right to view the rest of the webpage. I would like to be able to fit the entire webpage into the viewport, even if there's space between the viewport and my webpage.

我无法修改宽度所有绝对定位。

I can't modify the width as it's all absolute positioning.

更新：

。显然iPad没有采取我的@viewport值，所以我下载x代码和测试标签。除了在网页底部有一点间距（为了在iPad上保持4：3的宽高比），网页现在非常适合iPad的视口。

I found a solution to my problem. Apparently the iPad was not taking my @viewport values, so I downloaded x-code and tested tags. Other than a bit of spacing on the bottom of the webpage (to preserve an aspect ratio of 4:3 on the iPad), the webpage now fits nicely in the iPad's viewport.

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

推荐答案

您需要将元视口设置为大小

You would need to set the meta viewport to the size you want eg below:

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

但是Google说一个固定的视口是一种不好的方法，你应该使用'device-width'

But Google has said that a fixed viewport is a bad method and you should use 'device-width' then make the website responsive.

有关Web主工具的信息更新

这篇关于如何将固定宽度的网站缩放到iPad视口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！