gpt4 book ai didi

ios - iOS 设备的 CSS 媒体查询问题

转载 作者:可可西里 更新时间:2023-11-01 04:42:29 24 4
gpt4 key购买 nike

我设置了以下媒体查询以针对各种 iOS 设备(iPad3、iPad2、iPhone4、iPhone3)。当我用 iPhone3 和 iPad2 加载此页面时,正确的 div 会被着色。但是,当我用 iPad3 加载此页面时,会加载 iPad2 和 iPhone4 样式,但不会加载 iPad3。 (目前无法测试 iPhone4。)有什么想法吗?

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="ipad3.css" media="only screen and (min-device-width:1536px) and (max-device-width:2048px) and (-webkit-min-device-pixel-ratio:2)" type="text/css" />
<link rel="stylesheet" href="ipad2.css" media="only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:0)" type="text/css" />
<link rel="stylesheet" href="iphone4.css" media="only screen and (min-device-width:640px) and (max-device-width:960px) and (-webkit-min-device-pixel-ratio:2)" type="text/css" />
<link rel="stylesheet" href="iphone3.css" media="only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:0)" type="text/css" />
</head>

<body>
<div id="ipad3" style="width:200px;height:200px;border:1px solid black"></div>
<div id="ipad2" style="width:200px;height:200px;border:1px solid black"></div>
<div id="iphone4" style="width:200px;height:200px;border:1px solid black"></div>
<div id="iphone3" style="width:200px;height:200px;border:1px solid black"></div>

ipad3 should be RED
<br>
ipad2 should be GREEN
<br>
iphone4 should be BLUE
<br>
iphone3 should be ORANGE
</body>
</html>

..4个css文件也相应编码(本例为iPad3.css文件):

#ipad3 { background-color: red; }

最佳答案

因为您将视口(viewport)的宽度设置为 device-width,所以 iPad3 的屏幕分辨率仍会报告为 1024x768,但 device-pixel-ratio 将为 2。

关于ios - iOS 设备的 CSS 媒体查询问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10455852/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com