如何通過CSS媒體查詢區分手機和屏幕？

我讀過，大多數媒體查詢使用視口寬度來確定您是否在手機，平板電腦或PC上。我在無盡的網格中建立一個具有1000個小拇指的圖像網格。每個拇指都是125px，在我的筆記本電腦上（MacBook 13「），我可以輕鬆地將9-10拇指放在一行中 - 這給用戶帶來了不錯的體驗。如果我將相同的代碼添加到nexus 5， -7大拇指，這是一個糟糕的用戶體驗，連線是6-7釐米，MacBook是25英寸釐米 - 差別很大如何通過CSS媒體查詢區分手機和屏幕？

我的方法是檢測設備是手機還是pc，拇指的縮放比例 - 大的移動（比如250px）和小的PC（125px）但是如何檢測設備如果我使用寬度，我基本上必須使用1100px的最小寬度去捕捉大多數新的我也可以去分辨率，手機一般都比PC /筆記本電腦有更高的DPIs

或者我有這個完全錯誤嗎？

我在React中編寫應用程序。

來源

2017-08-17 martin

分辨率比檢測移動一個更好的方法 - 平板電腦與大屏幕尺寸的移動用戶代理，例如。 – Skyler

這並不是說您的Nexus 5呈現1080px寬的網頁，而是您的網站無法響應您的手機屏幕，因此呈現爲縮小的桌面網站。

您需要將此視元標記添加到您網站的<head>：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

一旦在，您的Nexus 5應在廣泛更接近於400像素渲染網頁，你可以立足媒體圍繞查詢。

這裏是你如何讓你的縮略圖125px寬屏幕爲寬480像素下：

@media (max-width: 480px) { 
    img { 
    width: 125px; 
    } 
}

來源

2017-08-17 18:27:35

這是甜蜜的，簡單的 - 我想知道每個人都是如何寫寬度的方式...謝謝 – martin

如何通過CSS媒體查詢區分手機和屏幕？

回答

相關問題