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

概述我试图为选定的屏幕尺寸范围指定不同的颜色,但我似乎无法弄清楚带有Retina显示屏的iPad Mini 2.它确实不遵循它的像素分辨率的规则,我想知道为什么. 这是我的代码： /** Retina iPad **/@mediascreen and (-webkit-min-device-pixel-ratio: 1.5),screen and (-moz-min-device-pixel-r 我试图为选定的屏幕尺寸范围指定不同的颜色,但我似乎无法弄清楚带有Retina显示屏的iPad Mini 2.它确实不遵循它的像素分辨率的规则,我想知道为什么.

这是我的代码：

/** Retina iPad **/@mediascreen 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.为什么它不遵循其决议规则：2048×1536？

我的HTML中也有这个：

<Meta name="vIEwport" content="wIDth=device-wIDth; initial-scale=1; maximum-scale=3;" />

我尝试过使用1.5和2之间的像素比率,这是其他人在之前的问题中提出的.有帮助吗？

我正在使用的网站是here,如果你想亲眼看看.

解决方法 通过以正确的顺序放置CSS规范来解决问题.

When selectors have an equal specificity value,the latest rule is the
one that counts.

我还补充说：

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 **/@mediaonly 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;    }}

所以正确的顺序是：最后一次取代FirsT,这意味着设备宽度需要被视网膜细节所推翻.有关这方面的更多信息,请参阅此处CSS Specificity

总结

以上是内存溢出为你收集整理的html – iPad Mini 2的自定义CSS,视网膜显示和@media屏幕/视口设置全部内容，希望文章能够帮你解决html – iPad Mini 2的自定义CSS,视网膜显示和@media屏幕/视口设置所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。