Gear 2 (SM-380) 不支持 @media 屏幕查询
Gear 2 (SM-380) doesn't support @media screen queries
我在 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);}
);
现在好像可以用了,appstore终于接受了申请。
我在 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);} );
现在好像可以用了,appstore终于接受了申请。