css - Firefox 没有获取特定于 iPad 的媒体查询

Question

我在 OSX (v46.0.1) 上使用最新版本的 Firefox，并使用以下媒体查询实现了平板电脑的特定设计:

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px){}

Firefox 完全忽略它。它还使 bootstrap xs size 媒体查询完全错误，但我不希望任何人看到它(Firefox 移动版工作正常)。为了以防万一，我已经关闭了 Firefox 中的所有扩展，但它没有帮助。

有没有人遇到过这种情况？

Answer 1

更改最小/最大设备

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)

至最小/最大宽度

@media only screen and (min-width: 768px) and (max-width: 1024px)

---

原因

min/max-width

The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).

min/max-device-width

Determines whether the output device is a grid device or a bitmap device. If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1. Otherwise it is zero.