css link 调整 (pc) 浏览器大小时显示设备横向 window

Question

我希望我的 "landscape" css 仅在设备横向模式下加载，并且在调整（缩小）浏览器大小时加载并破坏我的正常 css 样式。

这是我在索引 html 文件中使用的代码：

这是我为设备使用的媒体查询：

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

Answer 1

这是一个景观控制器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 参考：

计算器。com/a/11381730/2686143

css link 调整 (pc) 浏览器大小时显示设备横向 window

css link for device landscape orientation shows up when resizing the (pc) browser window

html

css

media-queries