HTML 设置视口大小，以便在iPad等上正确显示网页

Posted 2021-05-24

<!-- viewport width for setting screensize of other devices. iPad etc -->
<meta name="viewport" content="width=1024" />

iPad Mini 2、视网膜显示和@media 屏幕/视口设置的自定义 CSS

【中文标题】iPad Mini 2、视网膜显示和@media 屏幕/视口设置的自定义 CSS

【英文标题】：Custom CSS for iPad Mini 2, retina display and @media screen/viewport settings

【发布时间】：2015-05-24 23:55:07

【问题描述】：

我正在尝试为选定的屏幕尺寸范围指定不同的颜色，但我似乎无法弄清楚配备 Retina 显示屏的 iPad Mini 2。它根本不遵循它的像素分辨率规则，我想知道为什么。

这是我的代码：

/** Retina iPad **/
@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (-o-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5)
    body 
        background-color: #486ffd;
    

/** 1600px non-retina screen **/
@media screen and (max-width: 1600px)
    body 
        background-color: #770029;
    

/** 1000px non-retina screen **/
@media screen and (max-width: 1000px)
    body 
        background-color: #117700;
    

/** 500px non-retina screen **/
@media screen and (max-width: 500px)
    body 
        background-color: #ffce00;
    

/** 300px non-retina screen **/
@media screen and (max-width: 300px)
    body 
        background-color: #770200;
    

现在，当我的 iPad Mini 2 处于纵向模式时，它会显示背景颜色 #117700，而当我将它置于横向模式时，它会显示颜色 #770029。怎么不符合2048x1536分辨率的规则？

我的 HTML 中也有这个：

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

我已尝试在 1.5 和 2 上同时使用像素比，这是其他人在之前的问题中提出的建议。有什么帮助吗？

我使用的网站是here，如果你想亲自看看的话。

【问题讨论】：

您是否尝试更改 1600 值只是为了查看断点在哪里，它是否符合您的预期？

@adeneo 问题是我不想在视网膜显示器上使用 max-width: 1600px，因为我希望在视网膜显示器上放置移动版本时，只要它处于纵向模式。否则，所有网站元素都会变得如此之小，并且在视网膜平板电脑上使用该网站会很烦人。这就是我尝试使用像素比的原因。

这些都可以帮助你：css-tricks.com/snippets/css/retina-display-media-query ?

【参考方案1】：

通过按正确的顺序放置 CSS 规范解决了问题。

When selectors have an equal specificity value, the latest rule is the 一个重要的。

我还补充了：

only screen and (min-resolution: 192dpi)
only screen and (min-resolution: 2dppx)

为了让它更加贴合和指定。

/** 1600px non-retina screen **/
@media screen and (max-width: 1600px)
    body 
        background-color: #770029;
    


/** Retina iPad **/
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx)
    body 
        background-color: #486ffd;
    

所以正确的顺序是：LAST 否决 FIRST，这意味着设备宽度需要被视网膜细节否决。更多信息可以在这里阅读CSS Specificity

【讨论】：

你去，+1！

@adeneo 感谢您帮助解决 Adeneo，+1！ :)