ipad 肖像的视口 [仅] [英] Viewport for ipad portrait [only]

问题描述

我构建了一个响应式网站，但在 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 肖像的视口 [仅]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！