我的网站上有 3 个媒体查询，我遇到的问题是 iphone 的 -webkit-min-device-pixel-ratio 在 android 设备上冲突并且屏幕在 android 上无法正确解析，如果我将此 mq 取出该站点可以正确呈现，但在 iphone 4 上它不能正确呈现并且工作宽度为 320 像素。
有没有办法只让 iphone 4/4s 设备查看 -webkit-min-device-pixel-ratio: 1.5 媒体查询？
以下是我的媒体查询:
/*iphone4*/
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
/*Main*/
div#container {
width: 480px;
}
}
/*Other mobile phones*/
@media screen and (max-width: 767px) {
div#container {width: 480px;}
}
/*Tablets*/
@media only screen and (max-width: 1023px) and (min-width: 768px) {
div#container {width: 768px;}
}
最佳答案
您认为 iPhone 4 有多宽(以像素为单位)？您认为它的比例值是多少？阅读您的规则，我觉得您是想说“如果它是一部大手机，请将其设置为 480 宽。如果它是一款较小的视网膜手机，则将其设置为 480 宽，否则为 768”
但实际上，iphone4 的宽度为 320 像素，比例为 2，因此您需要将容器设置为 320 像素宽，然后使用 background-size:contain 做一些事情图片
但是，忽略...这个页面:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Media2</title>
<style>
body, html {margin:0;padding:0;height:100%;width:100%; background-color:#000000;}
#block {background-size:contain; background-image:url('http://www.robotwoods.com/images/blog/640_300px.png'); display:block; width:320px; height:150px; }
@media (max-width: 767px) { body {background-color:#0000FF;} }
@media (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) { body {background-color:#00FF00;} }
@media (min-width: 768px) { body {background-color:#FF0000;} }
</style>
</head>
<body>
<div id="block"></div>
</body>
</html>
出现:
- iPod touch 中的蓝色
- Android Nexus S 中的蓝色
- Blackberry Bold 中的蓝色
- iPhone4 中的绿色
- iPad 中的红色
你可以去http://www.robotwoods.com/dev/misc/so_media2.html如果您有其他设备要测试。我在这里发布了一个关于媒体查询的小条目:http://blog.robotwoods.com/2012/08/media-queries/但并没有真正进入像素比方面
关于iphone - 媒体查询跨设备冲突，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11743584/