viewport - ipad 肖像的视口 [仅限]

Question

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

即它不适合。

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

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

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

Answer 1

I had a similar issue just now, on a site that is 1550px wide on desktop but only 880px on mobile.

Things were working great with

<meta name="viewport" content="width=880px, initial-scale=1.0, user-scalable=1;" />

combined with

<link rel="stylesheet" media="all" href="/css/base.css" />
<link rel="stylesheet" media="(max-width:880px)" href="/css/mobile.css" />

(mobile.css readjust some element widths to fit nicely into the 880px mobile layout.)

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%; 
}

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.