Iphone 跨设备的媒体查询冲突_Iphone_Css_Media Queries

Iphone 跨设备的媒体查询冲突

iphone css

Iphone 跨设备的媒体查询冲突,iphone,css,media-queries,Iphone,Css,Media Queries,我在我的网站上有3个媒体查询，我遇到的问题是，iphone的-webkit min设备像素比1在android设备上有冲突，在android设备上屏幕分辨率不正确，如果我去掉这个mq，网站渲染正确，但在iphone 4上没有，并且工作时的宽度为320px 有没有一种方法可以让一台iPhone4/4s设备查看-webkit最小设备像素比：1.5媒体查询以下是我对媒体的查询： /*iphone4*/ @media only screen and (-webkit-m

我在我的网站上有3个媒体查询，我遇到的问题是，iphone的-webkit min设备像素比1在android设备上有冲突，在android设备上屏幕分辨率不正确，如果我去掉这个mq，网站渲染正确，但在iphone 4上没有，并且工作时的宽度为320px

有没有一种方法可以让一台iPhone4/4s设备查看-webkit最小设备像素比：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;}

        }

你认为iPhone4有多宽（以像素为单位）以及它的刻度值是多少？阅读你的规则，我觉得你想说“如果是大手机，就把这个调宽480。如果是小手机，就把它调宽480，否则就调宽768”

但实际上，iphone4的宽度为320像素，刻度为2，因此您希望将容器的宽度设置为320px，然后使用

背景大小：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>


媒体2
正文，html{边距：0；填充：0；高度：100%；宽度：100%；背景色：#000000；}
#块{背景大小：包含；背景图像：url（'http://www.robotwoods.com/images/blog/640_300px.png'）；显示：块；宽度：320px；高度：150px；}
@介质（最大宽度：767px）{主体{背景色：#0000FF；}
@介质（最大设备宽度：320px）和（-webkit最小设备像素比：2）{body{背景色：#00FF00；}
@媒体（最小宽度：768px）{正文{背景色：#FF0000；}

出现：

ipodtouch中的蓝色
安卓Nexus S中的蓝色
黑莓黑体蓝
iPhone4中的绿色
iPad里的红色

如果有其他设备要测试，可以转到。我在这里发布了一个关于媒体查询的小条目：但没有真正进入像素比率方面

你认为iPhone4有多宽（以像素为单位）以及它的缩放值是多少？阅读你的规则，我觉得你想说“如果是大手机，就把这个调宽480。如果是小手机，就把它调宽480，否则就调宽768”

但实际上，iphone4的宽度为320像素，刻度为2，因此您希望将容器的宽度设置为320px，然后使用

背景大小：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>


媒体2
正文，html{边距：0；填充：0；高度：100%；宽度：100%；背景色：#000000；}
#块{背景大小：包含；背景图像：url（'http://www.robotwoods.com/images/blog/640_300px.png'）；显示：块；宽度：320px；高度：150px；}
@介质（最大宽度：767px）{主体{背景色：#0000FF；}
@介质（最大设备宽度：320px）和（-webkit最小设备像素比：2）{body{背景色：#00FF00；}
@媒体（最小宽度：768px）{正文{背景色：#FF0000；}

出现：

ipodtouch中的蓝色
安卓Nexus S中的蓝色
黑莓黑体蓝
iPhone4中的绿色
iPad里的红色

如果有其他设备要测试，可以转到。我在这里发布了一个关于媒体查询的小条目：但并没有真正进入像素比率方面

整个策略需要重新审视。你的第一个媒体查询也将针对iPad3。你能提出一个更好的策略吗？谢谢你为什么不把宽度作为第一条规则而不是像素比例呢。即，如果最大宽度<480px，则容器宽度=320px？这似乎与你的其他方法更为一致。我可以这样做，但涉及到创建另一个媒体查询，而不是利用iPhone。整个策略需要审查。你的第一个媒体查询也将针对iPad3。你能提出一个更好的策略吗？谢谢你为什么不把宽度作为第一条规则而不是像素比例呢。即，如果最大宽度<480px，则容器宽度=320px？这似乎与你的其他方法更为一致。我可以这样做，但涉及到创建另一个媒体查询，而不是利用iPhone。谢谢你的信息性帖子。我使用了480px宽，然后使用1.5的像素比例将其转换为640，这是iphone的视网膜显示像素宽度。与从320px倍增相比，上升1.5px时清晰度更好。但当我在galaxy便笺上查看该网站时，像素比mq似乎干扰了android手机。你知道为什么会这样吗？如果我去掉像素比mq，手机将正确获得767px mq，因为屏幕px宽度为900px。我想你可能误解了像素比。这就是它，它不适用于改变大小。iphone4的宽度为320像素，比例为2，因此如果您提供640像素的图像，它们都将被使用。而且，因为这不是一个“设置”，如果galaxy note的比率为1，则不会应用该媒体查询，因为它仅用于比率更高的设备上，有意义吗？如果您提供640px宽的图像，除非您使用像素比率“加倍”屏幕，否则它将离开屏幕。galaxy note的比率确实为1，但出于某种原因，它使用像素比率mq使图像变小，当它应该使用767px媒体查询时。对于该图像，将大小设置为320px（即使是640），它将以高分辨率显示（或者，如果使用CSS，则设置背景大小：contain）哦，实际上，我刚刚注意到你在上一张便条中的一点：你说它使图像变小了……如果视口比你预期的大，就会发生这种情况（你设置好了吗？），请查看此页面：谢谢你提供信息的帖子。我使用了480px宽，然后使用1.5的像素比例将其转换为640，这是iphone的视网膜显示像素宽度。与从320px倍增相比，上升1.5px时清晰度更好。但当我在galaxy便笺上查看该网站时，像素比mq似乎干扰了android手机。你知道为什么会这样吗？如果我拿出手机的像素比例