Question

我在CSS中使用以下媒体查询，它适用于Gear 2 Neo（SM-R381），但它不适用于旧版Gear 2（SM-R380）。你知道为什么吗？可能它与这两个设备支持的API级别的差异有关吗？任何指针都表示赞赏。到目前为止，谷歌搜索并没有帮助。

SM-R380完全忽略了这些款式，同时受到SM-R381的尊重。

@media screen and (max-width: 320px) {
/*
.ui-header {
    top: 0;
    height: 46px;
    padding: 0;
    border: 0;
}

.ui-footer {
    border: 0;
    padding: 0;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
}

.ui-header > button, .ui-footer > button {
    height: 46px;
    padding: 0;
    line-height: 48px;
}

footer.ui-footer {
    height: 46px;
}
*/    
.icon-title {
    max-width:250px; 
 }

 .icon-title-menu {
     max-width:200px;
 }

. digit {
    width: 23px;
    height: 34px;
    float: left;
    margin-right: 1px;
    margin-left: 1px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.colon {
    background-image: url(../img/14x51/colon.png);
    width: 8px;
    height: 40px;
 }

.token {
     margin-left:auto; 
     margin-right:auto; 
     margin-top:5%;
     width:154px;
    height:auto;    
 }

 .time {
    margin-left:auto; 
     margin-right:auto; 
     margin-top:5%;
    width:170px;
     height:auto;   
}

.pb {
    margin-left:auto; 
    margin-right:auto; 
    margin-top:27%; 
    width:64px; 
    height:64px; 
    background-size: 100%;"
    background-repeat: no-repeat;
}

}

Answer 1

经过反复研究而没有得到让@media在Gear 2（SM-R380）上工作的解决方案，我找到了解决方法：

创建了两个样式表 - 一个用于320x320屏幕，另一个用于360x480

在＆lt; / head＆gt;之前向index.html添加了以下代码标记：

<script type="text/javascript">

function setStyle(kb) {
    var link = document.createElement( "link" );
    link.href = kb?"./css/style.css":"./css/style320.css";
    link.type = "text/css";
    link.rel = "stylesheet";
    link.media = "screen";
    document.getElementsByTagName( "head" )[0].appendChild( link );
}

tizen.systeminfo.getPropertyValue("DISPLAY", 
    function (disp) {
        if (disp.resolutionWidth <= 320) 
            setStyle(false); 
        else
            setStyle(true); 
    }, 
    function (err) {console.log("Can't read display props: " + err.message); setStyle(false);} 
);

＆LT; /脚本＆GT;

现在它似乎正在运行，appstore终于接受了该应用程序。

Gear 2（SM-380）不支持@media屏幕查询

1 个答案: