0

我的样式似乎有问题，当我在三星 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;
    }
}

使用媒体查询来包含不同的样式表会更好还是这样也一样好？

4

1 回答 1

0

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

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

[/编辑]

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

于 2013-11-11T21:07:56.403 回答