CSS 当 iPad 处于纵向时，缩小 Mobile Safari 视口宽度？-
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6519998/
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
Scale down Mobile Safari viewport width when iPad is in portrait orientation?-
提问by Phil
I am working on a website which is designed to work best when viewed in landscape mode on iPad. Everything is in a 1024px wide <div>container. However, I am still required to scale down the viewport so when the user turns the iPad into portrait orientation, the user does not have to zoom out or scroll horizontally to see everything on the page.
我正在开发一个网站，该网站旨在在 iPad 上以横向模式查看时效果最佳。一切都在一个 1024 像素宽的<div>容器中。但是，我仍然需要缩小视口，因此当用户将 iPad 转为纵向时，用户不必缩小或水平滚动即可查看页面上的所有内容。
Currently I have this <meta>tag in my <head>:
目前我有这个<meta>标签在我的<head>：
<meta name="viewport" content="width=1024px, initial-scale=1.0, maximum-scale=10.0" />
Everything displays fine when the page is viewed in landscape mode, but I can't get the abovementioned required portrait behavior to work. I tried changing the initial-scaleto 0.75, and the exact opposite happens: everything fits in portrait mode, but there's extra horizontal space when iPad is in landscape mode.
在横向模式下查看页面时，一切都显示正常，但我无法使上述所需的纵向行为起作用。我尝试将 更改initial-scale为0.75，结果正好相反：一切都适合纵向模式，但是当 iPad 处于横向模式时会有额外的水平空间。
Is there any CSS, Javascript or special viewport setting I can use to get this to work?
我可以使用任何 CSS、Javascript 或特殊视口设置来使其工作吗？
P.S. I cannot use user-scalable=no.
PS我不能使用user-scalable=no。
采纳答案by testndtv
You can even add the orientation properties within the same CSS that you use for desktop browsers...Just need to add the following;
您甚至可以在用于桌面浏览器的相同 CSS 中添加方向属性......只需要添加以下内容；
@media only screen and (device-width:768px)and (orientation:portrait)
/*iPad Portrait orientation styles */
@media only screen and (device-width:768px)and (orientation:landscape)
/*iPad landscape orientation styles */
Again remember for iPad, device-width is always 768px irrespective of the orientation...I know it's confusing, but that's the way it is...
再次记住，对于 iPad，无论方向如何，设备宽度始终为 768 像素......我知道这很令人困惑，但这就是它的方式......
You can also check out a very good tutorial on the same at http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8
你也可以在http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8上查看一个非常好的教程
回答by John Kramlich
You may be able to use orientation specific CSS like this:
您可以像这样使用特定于方向的 CSS：
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
In that case you will likely have to set the viewports setting to the devices max width and take care of the actual width of the content using CSS. For example, wrap everything in a div with the appropriate width for each orientation, 1024px or 768px (minus the status bar and browser chrome is neccessary).
在这种情况下，您可能必须将视口设置设置为设备最大宽度，并使用 CSS 处理内容的实际宽度。例如，将所有内容都包装在一个 div 中，每个方向都有适当的宽度，1024 像素或 768 像素（减去状态栏和浏览器 chrome 是必要的）。
<meta id="viewport" name="viewport" content="initial-scale=1.0;minimum-scale=1.0; maximum-scale=1.0" />
