用於區分電話和桌面的媒體查詢

我已經看到許多不同的媒體查詢來檢測用戶是否正在使用電話或桌面。但是現在很多設備的分辨率，比率和許多其他事物之間的差距在高端設備（如S8），筆記本電腦和低端手機之間重疊。用於區分電話和桌面的媒體查詢

我的問題是，如果我想爲手機，其中包括所有的電話和一個用於臺式機的樣式表，有媒體查詢使用的就是最好的，或者我應該採取不同的方法可能與JavaScript的

橫向和縱向方式一直運行，直到使用軟鍵盤並且手機重新將其視爲風景

以下示例因爲已過期而不再適用於所有設備。

@media only screen and (orientation : portrait) 
@media only screen and (max-device-width: 480px) 
@media only screen and (min-aspect-ratio: 13/9)

來源

2017-09-26 Christopher Craven

那麼這就是設計「用於設備」的一般問題......並且隨着新設備和解決方案問世，目前還沒有真正的「解決方案」。這就是爲什麼恕我直言，讓您的媒體查詢和斷點根據您的_content_的需求更有意義。如果我的手機有足夠大的屏幕來顯示與臺式計算機相同的顯示效果 - 那麼爲什麼首先要對我的「手機視圖」強制執行......？ – CBroe

但是，物理手機尺寸保持不變，像素密度和分辨率更高。意味着電話視圖仍然是必需的，因爲它對於用戶來說太小而不能舒適地查看 –

只要您將媒體查詢基於CSS像素而不是設備像素，那也不是真正的問題。 – CBroe

不知道這是否有助於但我通常堅持通過引導V4定義的，即使它不是一個引導項目中的斷點。我發現這是一個很好的開發範圍和更多的時間，而不是僅僅在更大的斷點上有特定的樣式（正如我爲移動開發而開發的）。

如果你只想使用兩個斷點，我可能會建議< 768px和> 768px，但你可能會有不同意見的人。你肯定會遇到某些設備的邊緣情況。

來源

2017-09-26 13:49:44 Chris

謝謝克里斯，虐待這一去。我仍然困惑於設備像素和css像素之間的差異 –

給它一個去，它的工作。非常感謝你 –

用於區分電話和桌面的媒體查詢

回答

相關問題