跨设备的媒体查询冲突
我在我的网站上有3个媒体查询，我遇到的问题是iphone的-webkit-min-device-pixel-ratio在android设备上是冲突的，屏幕在android上不能正确解析，如果我拿出这个mq，网站渲染正确，但在iPhone4上它不能，并且宽度为320px。
有没有办法让iPhone4/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;}
}回答 1
Stack Overflow用户
发布于 2012-08-02 10:09:54
你认为iPhone 4有多宽(以像素为单位)，你认为它的比例值是多少？读着你的规则，我觉得你是在说：“如果是一部大手机，就把这个480宽。如果是一部小一点的视网膜手机，就把它调宽480，否则就是768。”
但实际上，iphone4的宽度为320像素，比例为2，因此您需要将容器设置为320px宽，然后对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触摸
- 蓝色安卓Nexus S
- 黑莓粗体
- 绿色iPhone4
- 红色iPad
如果您有其他设备要测试，可以转到http://www.robotwoods.com/dev/misc/so_media2.html。我在这里发布了一个关于媒体查询的小条目：http://blog.robotwoods.com/2012/08/media-queries/，但并没有真正涉及像素比率方面
https://stackoverflow.com/questions/11743584
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号