调整(pc)浏览器窗口大小时,会显示设备横向方向的css链接

时间:2015-09-08 12:38:23

标签: html css media-queries

我希望我的#34;风景" css只会在设备横向模式下加载,并且在调整brshoser并缩小我的普通css样式时会加载它。

以下是我在索引html文件中使用的代码:

以下是我用于设备的媒体查询:

@media screen(max-width:1200px),screen和(max-height:800px){ ... }

1 个答案:

答案 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