三星Galaxy S3的媒体查询

我有一个投资组合网站，我试图做出回应，我希望能够向我的S3上的人展示它，尽管我遇到了一些麻烦它使用媒体查询工作。我使用了诊断工具in this post，并在手机上安装的两个浏览器（三星的默认浏览器和Chrome）上获得了两个不同的设备宽度值，所以我刚刚使用“宽度”与设备像素比率相结合。三星Galaxy S3的媒体查询

这是我在我的样式表：

body, html 
{ 
    display: block; 
    font-family: quicksand, arial; 
    background-color: #EFEFEF; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#container 
{ 
    background-color: red; 
    width: 50%; 
    height: 50%; 
} 

@media only screen and (max-width: 22em) and (-webkit-device-pixel-ratio: 2) 
{ 
    #container 
    { 
     width: 100%; 
     height: 100%; 
     background-color: yellow; 
    } 
}

出于某种原因，背景颜色仍为红色，甚至当我查看了S3的页面。我错过了什么吗？

来源

2013-10-09 David Pearse

你使用任何特别的原因'em'，而不是'px'？ –

不是，当我有（最大宽度：360px）时，它似乎没有工作虽然... –

你可以尝试'-webkit-min-device-pixel-ratio：1.5'并看看它是否工作？ –

在我的三星S3搭载Android 4.1.2，而我尝试了所有的媒体查询功能（最大高度，宽度，设备高度和宽度以及颜色：8）只有这个工作对我来说：

/* Samsung S3 default browser portrait*/ 
@media only screen and (device-width: 720px) and (device-height: 1280px) and (orientation: portrait) { 
body { background:yellow;} 
} 

/* Samsung S3 default browser landscape */ 
@media only screen and (device-width: 1280px) and (device-height: 720px) and (orientation: landscape) { 
body { background:#000;} 
}

Here is a screenshot为pieroxy媒体查询诊断工具测试所有可能的查询。

请注意这两个工作都没有方向，但没有负载/刷新不改变适当性。

希望这有助于与其他任何疑问没有冲突可能使用

来源

2014-01-07 03:34:03 hsobhy

三星Galaxy S3的媒体查询

回答

相关问题