Question

我的造型似乎有问题，当我在三星Galaxy S4上检查我的造型时，它似乎应用了与我的桌面相同的样式。

这是因为S4的分辨率非常高吗？

我似乎无法绕过它，因为掌上电脑的查询似乎并不适用于它。

CSS代码：

@media screen {
    //Desktop Screens
    * { 
        margin: 0; 
        padding: 0; 
        border: 0; 
    }
    .clear { 
        clear:both; 
    } 

    .right { 
        float: right; 
    } 

    .left { 
        float: left; 
    }
    p.title {
        font-size: 18px;
        font-weight: bold;
    }
    body 
    {
        font: 80% / 1 "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif; 
        background: #877781; 
        color: #0c0c0c;
        text-align: center;
    } 
    .login_cont {
        height: 80%;
        width: 15%;
        font: 80% / 1 "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif;
        min-height: 200px;
        margin-top: 5%;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        background: #dadada;
        border: 1px solid #0c0c0c;
        box-shadow: 1px 1px 3px #0c0c0c;
        border-radius: 5px;
    }

    .login_cont label{
        margin: 5px;
        padding: 5px;
        margin-top: 10px;
        font: 150% / 1 "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif;
    }
    .login_cont h1 {
        margin: 5px;
        padding: 5px;
        margin-top: 10px;
        font: 250% / 1 "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif;
        font-weight: bold;
    }
    .login_cont input {
        height: 20px;
        width: 50%;
        margin: 10px
    }
    .login_cont input[type='submit'] {
        height: 20px;
        width: 50%;
        margin: 10px;
    }
}
@media screen and (max-width: 480px) {
    //Traditional phones
    .login_cont {
        height: 70%;
        width: 80%; 
    }
    .login_cont input {
        height: 20px;
        width: 1px;
        margin: 10px
    }
    .login_cont input[type='submit'] {
        height: 20px;
        width: 1px;
        margin: 10px;
    }
}
@media screen and (-webkit-min-device-pixel-ratio: 3.0) and (max-width: 1080px) {
    //Bigger phones
    .login_cont {
        height: 70%;
        width: 80%; 
    }
    .login_cont input {
        height: 20px;
        width: 80%;
        margin: 10px
    }
    .login_cont input[type='submit'] {
        height: 50px;
        width: 70%;
        margin: 10px;
    }
}

使用媒体查询来包含不同的样式表会更好吗？或者这样做会不错？

Answer 1

媒体查询检查屏幕宽度（以像素为单位）。所以，如果桌面布局适合，它就适合。很简单。问题是什么？在不同的手机上看起来不同？这没问题。为您的网站创建布局并不意味着它必须始终看起来完全相同，这意味着它必须在所有情况下都尽可能好看:) [编辑] S4的分辨率：尺寸1080 x 1920像素，5.0英寸（~441 ppi像素密度）因此，您必须调整媒体屏幕宽度属性。但这肯定会成为1920年水平视图的问题.... 否则你给桌面观众（现在有多少人）手机视图呢？

所以我认为你不用单独的媒体查询来解决它。我知道存在用于识别手机的PHP类。也许其他人有更好的解决方案。

[/编辑]

[第2次编辑] 使用这个PHP脚本，您可以识别所有移动设备：http://mobiledetect.net/ [/ 2nd edit]

媒体查询更大手机屏幕的问题

1 个答案: