我希望我的#34;风景" css只会在设备横向模式下加载,并且在调整brshoser并缩小我的普通css样式时会加载它。
以下是我在索引html文件中使用的代码:
以下是我用于设备的媒体查询:
@media screen(max-width:1200px),screen和(max-height:800px){ ... }
答案 0 :(得分:2)
这是一个横向控制器css示例:
js控制器:
function detectmob() {
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
){
return true;
}
else {
return false;
}
}
if(detectmob()){
$('body').addClass('mobile');
}
的CSS:
@media only screen
and (min-device-width : 320px)
and (max-device-width : 767px)
and (orientation:portrait)
and (max-aspect-ratio: 13/9)
{
.mobile your_target{}
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 767px)
and (orientation:landscape)
and (min-aspect-ratio: 13/9)
{
.mobile your_target{}
}
您可以更改断点或不使用它们。
JS REF:
stackoverflow.com/a/11381730/2686143