问题描述
我构建了一个响应式网站，但在 iPad 上以纵向渲染时遇到问题
I have built a responsive website and it encounters problem while rendering in portrait orientation on iPad
即它不适合.
我曾尝试调整视口元的参数值，但这也会影响整个渲染，包括在移动设备上.
I have tried adjusting the viewport meta's parameter values but that also affects the whole rendering, including on mobile.
我在我的网站中使用了以下视口元数据.
I used the following viewport meta in my website.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
推荐答案
我刚才遇到了一个类似的问题，在一个桌面上宽度为 1550px 而移动设备上只有 880px 的网站上.
I had a similar issue just now, on a site that is 1550px wide on desktop but only 880px on mobile.
一切都很好
<meta name="viewport" content="width=880px, initial-scale=1.0, user-scalable=1;" />
结合
<link rel="stylesheet" media="all" href="/css/base.css" />
<link rel="stylesheet" media="(max-width:880px)" href="/css/mobile.css" />
(mobile.css 重新调整一些元素宽度以适应 880px 移动布局.)
(mobile.css readjust some element widths to fit nicely into the 880px mobile layout.)
一切看起来不错，直到我在 iPad 上的 iOS 模拟器上对其进行了测试.在纵向中看起来不错，但在横向中，一些元素(特别是那些具有 width: 100%).这意味着当向右滚动(或缩小)以查看整个 1550px 元素时，具有 width: 100% 的元素从左侧悬空，只有它们应有的宽度的一半左右.
Things looked good until I tested it on an iPad in the iOS Simulator. In portrait things looked alright, but in landscape orientation some elements (specifically those with width: 100%) adjusted to the viewport width, while some didn't (that one element with width: 1550px). This meant that when scrolling right (or zooming out) to view the entire 1550px element, the elements with width: 100% were left dangling from the left side, only about half as wide as they should be.
解决方案远非显而易见，但我是这样解决的:
The solution was far from obvious, but here's how I solved it:
base.css
body{
width: 100%;
min-width: 1550px;
}
mobile.css
body{
min-width: 100%;
}
这将 body 元素的最小宽度显式设置为 1550 像素，适用于所有宽度超过 880 像素的设备，包括将视口元标记考虑在内的平板电脑.在宽度小于 880px 的移动设备上查看时，body 元素的宽度将重置为 100%，即视口宽度.
This explicitly sets the miniumum width of the body element to 1550px for all devices wider than 880px, including tablets that take the viewport meta tag into account.When viewed on a mobile device with a width less than 880px, the width of the body element is reset to simply 100%, i.e. the viewport width.
希望这能帮助那些在不同设备上为不同布局而苦苦挣扎的人.
Hope this will help someone out there struggling with different layouts for different devices.
这篇关于ipad 肖像的视口 [仅]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！