CSS 调整网站宽度以适应 iPad 屏幕的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14902628/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resize site width to fit within width of iPad screen
提问by Tim Jahn
I have a site that is 2048px wide. Is there a way to automatically have the iPad fit the entire site width on the screen when the site is loaded? I've tried experimenting with meta viewport in a few different ways:
我有一个 2048px 宽的网站。有没有办法在网站加载时自动让 iPad 适应屏幕上的整个网站宽度？我尝试以几种不同的方式尝试元视口：
<meta name="viewport" content="width=device-width maximum-scale=1.0">
<meta name="viewport" content="width=device-width initial-scale=1.0">
This hasn't worked though. The site is still too wide and spills off screen on the iPad.
然而这并没有奏效。该网站仍然太宽，溢出到 iPad 的屏幕上。
回答by jjgrainger
You can pass a fixed size to the content width like so:
您可以将固定大小传递给内容宽度，如下所示：
<meta name="viewport" content="width=2048" />
May need some tweaking to allow for padding either side, but should load the site at that size and allow users to zoom in.
可能需要进行一些调整以允许在任一侧填充，但应以该大小加载站点并允许用户放大。
回答by steffanjj
The correct way to fix this problem are by using percentages rather than fixed widths. But if you "cannot" change that, you can force your viewport to scale down by using 0.x in initial-scale like:
解决此问题的正确方法是使用百分比而不是固定宽度。但是，如果您“无法”更改它，则可以通过在初始比例中使用 0.x 来强制您的视口缩小，例如：
<meta name="viewport" content="width=device-width, initial-scale=0.625, user-scalable=yes" />
回答by Vlad
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
That's what I use for my website.
这就是我用于我的网站的内容。
回答by Sean
Try setting min-width: 2048px;to the html and body tags in css. That's fixed some weirdness on iPads for me before, but not sure if it will apply to this one.
尝试min-width: 2048px;在 css 中设置html 和 body 标签。这为我之前修复了 iPad 上的一些奇怪之处，但不确定它是否适用于这个。
回答by britter
I was working on a site with the same problem recently, it wouldn't stay zoomed out between page clicks for a fixed 960px width site. Try:
我最近在一个有同样问题的网站上工作，对于一个固定的 960 像素宽度的网站，它不会在页面点击之间保持缩小。尝试：
<meta name="viewport" content="width=device-width, initial-scale=-100%" />
So far so good, passed on my Ipad Air.
到目前为止一切顺利，通过我的 Ipad Air。
回答by Cubiczx
This works fine:
这工作正常：
<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">
