ipad 肖像的视口 [仅限]

Question

我建立了一个响应式网站，但在 iPad 上纵向渲染时遇到问题

即它不适合。

我已尝试调整视口元数据的参数值，但这也会影响整个渲染，包括在移动设备上。

我在我的网站中使用了以下视口元数据。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Answer 1

我刚才遇到了类似的问题，在一个在桌面上宽 1550 像素但在移动设备上只有 880 像素的网站上。

一切都很好

<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 重新调整一些元素宽度以很好地适应 880 像素的移动布局。）

在我在 iPad 上的 iOS 模拟器中对其进行测试之前，一切看起来都不错。纵向看起来还不错，但横向一些元素（特别是带有width: 100% 的元素）调整到视口宽度，而有些则没有（带有width: 1550px 的元素）。这意味着当向右滚动（或缩小）以查看整个 1550px 元素时，带有width: 100% 的元素从左侧悬空，只有它们应有的宽度的一半左右。

解决方案远非显而易见，但我是这样解决的：

base.css

body{
    width: 100%;
    min-width: 1550px; 
}

mobile.css

body{
    min-width: 100%; 
}

这明确将body 元素的最小宽度设置为 1550 像素，适用于所有宽度超过 880 像素的设备，包括考虑到视口元标记的平板电脑。 在宽度小于 880 像素的移动设备上查看时，body 元素的宽度将重置为简单的 100%，即视口宽度。

希望这将帮助那些在不同设备的不同布局中苦苦挣扎的人。