Question

我建立了一个响应式网站，在iPad上以纵向方式呈现时遇到问题

即它不适合。

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

我在网站上使用了以下viewport元。

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

直到我在iOS模拟器中的iPad上测试它才看起来很棒。在纵向看来，事情看起来没问题，但在横向方向上，一些元素（特别是那些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％，即视口宽度。

希望这可以帮助那些在不同设备上使用不同布局的人。

ipad肖像的视口[仅]

1 个答案: