Question

我在我的网站上有3个媒体查询，我遇到的问题是-webkit-min-device-pixel-ratio对于iphone而言在Android设备上存在冲突且屏幕在android上无法正确解析，如果我把这个mq拿出网站渲染正确，但在iPhone 4上没有，并且工作在320px宽度。

有没有办法可以只使用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;}

        }

Answer 1

您认为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 touch
蓝色Nexus S
黑莓大胆的蓝色
绿色
iPad中的红色

如果您要测试其他设备，可以转到http://www.robotwoods.com/dev/misc/so_media2.html。我在这里发布了一些关于媒体查询的条目：http://blog.robotwoods.com/2012/08/media-queries/但是没有真正进入像素比方面

媒体查询跨设备冲突

1 个答案: