css - Gear 2 (SM-380) 不支持 @media 屏幕查询

标签 css tizen-wearable-sdk tizen-web-app

我在 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;
}

}

最佳答案

在反复思考这个问题后,没有找到让@media 在 Gear 2 (SM-R380) 上工作的解决方案,我找到了解决方法:

  1. 创建了两个样式表 - 一个用于 320x320 屏幕,另一个用于 360x480
  2. 在 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);} 
    );              
    

    </script>

现在好像可以用了,appstore终于接受了申请。

关于css - Gear 2 (SM-380) 不支持 @media 屏幕查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30491530/

相关文章:

javascript - 如果 div 包含特定的文本字符串,则更改背景颜色

javascript,又一个 TypeError : 'undefined' is not a function

html - tizen - 如何为所有 html 应用程序页面设置背景

css - 将一个按钮放入 3 个图像

CSS:是否有可能有一个 3 列布局,左列和中间列都可以灵活地填充空间?

javascript - 为 javascript 菜单效果粘在当前页面的状态

使用 C 特定修改时使用 html 标签控制 tizen 应用程序标签大小和格式

c - 在 Native Tizen 可穿戴设备中使用 libcurl 从 url 输出 json 响应

proxy - 无法通过 Tizen 模拟器中的代理连接到 Internet

java - Tizen TV - 部署引发错误