三星 Galaxy S3 的媒体查询

Posted 2023-03-06

【中文标题】三星 Galaxy S3 的媒体查询

【英文标题】：Media Queries for Samsung Galaxy S3

【发布时间】：2013-10-17 10:34:21

【问题描述】：

我有一个投资组合网站，我正在尝试使其具有响应性，并且我希望能够在我的 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 上查看页面，背景颜色仍然是红色。 我错过了什么吗？

【问题讨论】：

您使用em而不是px的任何特殊原因？

不是真的，但当我有 (max-width: 360px) 时它似乎也不起作用......

你可以试试-webkit-min-device-pixel-ratio: 1.5看看它是否有效？

如果没有，你可以试试max-device-width吗？我相信那将是720px。你需要检查pieroxy test features

还是不行:-(

【参考方案1】：

在装有 android 4.1.2 的三星 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 媒体查询诊断工具测试所有可能的查询。

请注意，两者都可以在没有方向的情况下工作，但不要在没有加载/刷新的情况下更改适当性。

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