我在 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) 上工作的解决方案,我找到了解决方法:
- 创建了两个样式表 - 一个用于 320x320 屏幕,另一个用于 360x480
在 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/