CSS媒體查詢：目標移動設備沒有指定寬度，像素比例等

Question

比方說，我只是想針對每個平板電腦和手機，無論大小，是否有媒體查詢呢？沒有指定大小可以做到這一點？或者正在使用大小來定位移動設備，而不是桌面？

Answer 1

在CSS3 spec中提到了@media handeld，但它可能沒有瀏覽器支持。

所以，沒有。

但是，您可能會發現this site有用，它解釋了其他一些移動媒體查詢技術。

Answer 2

我一直在爲此奮鬥了幾天，但檢查手持設備的好方法是最大設備寬度。臺式電腦不會將此發送給瀏覽器，但大多數（如果不是全部）手持設備都使用此功能。

在我來說，我想證明上的所有設備（包括臺式機）低於一定寬度的時候，我使用該網站的壓縮版本

@media all and (max-width: 640px)

但是，使用的規定覆蓋彈出position: fixed只能在手持設備上更改（因爲css屬性適用於所有桌面瀏覽器，但不適用於所有手持設備）。所以我用了一個附加規則：

@media all and (max-device-width: 640px)

我在其中低於目標640個，但不是桌面瀏覽器所有的手持設備。順便說一句，這也不針對iPad（這是我想要的），因爲它具有比640px更高的設備寬度。

如果您只想定位所有設備，只需選擇一個最小寬度（1px），以便它不會排除任何設備，無論寬度如何。

Answer 3

我不認爲你會有純粹的css方法運氣太多。你會想按照modernizer.js方法和我們JS的方式來做一些事情來檢測設備，並在此基礎上爲類添加一個類名。

What is the best way to detect a mobile device in jQuery?

然後在您的媒體查詢大小不等的特殊情況，移動設備是一流的。