媒体查询三星Galaxy S3

时间:2013-10-09 21:03:26

标签: android css responsive-design media-queries galaxy

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

这是我在样式表中的内容:

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上查看页面,背景颜色仍然是红色。 我错过了什么吗?

1 个答案:

答案 0 :(得分:4)

在我的带有Android 4.1.2的Samsung S3上,虽然我尝试了所有媒体查询功能(最大高度,宽度,设备高度和宽度,甚至颜色: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媒体查询诊断工具测试。

请注意,两者均无需定位即可正常工作,但如果没有加载/刷新,则不会改变其适当性。

希望这有助于与您可能使用的任何其他查询冲突