仅在横向中应用样式，仅在移动设备上应用

Question

我使用@media (orientation:landscape){..}媒体类型仅在横向模式下应用样式，并且仅适用于767px下方的移动设备。

Answer 1

@media (orientation:landscape) and (max-width: 767px){..}

要检测设备类型，您可以使用javascript：

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  // your code which add styles
}

Answer 2

如果您只想按指定的宽度识别移动设备，那么您也可以使用max-width in your media query：

@media (max-width: 767px) and (orientation: landscape) {
  ...
}

此外，还有nice article on CSS-Tricks关于如何通过媒体查询将样式应用于不同设备。

您还可以在媒体查询中使用handheld类型，但不幸的是，大多数现代移动设备都不支持这种类型（他们将自己标识为screen）。

要真正检测设备是否可移动，您需要使用Javascript。 请参阅this post或this post。