初始化不同寬度的移動瀏覽器

Question

因此，我一直在一個響應式網站上工作一段時間。我現在已經對佈局進行了排序，還有內容，所以我決定向網站添加斷點，並使用媒體查詢相應地調整元素。所以我知道斷點必須基於佈局開始打破時添加，並且不是在流行的屏幕分辨率上，但是當我在我的Moto X（2013）上測試Android版Firefox的網站時，我的手機有一個分辨率爲1280x720像素，但當我使用最小寬度查詢添加一個斷點（比如700像素）時，它不會影響頁面，但是當我更改980像素最小寬度的相同查詢時，它可以工作。現在我的問題是：是不是應該在實際分辨率上觸發，還是瀏覽器以不同的方式呈現？順便說一句我正在談論肖像取向。

Answer 1

分辨率是寬高比不同，我建議您在您的媒體查詢寬高比以實現自己的目標，看到這段視頻，瞭解和解決方案

Resolution and Aspect Ratio Explained

寬高比之間的差異

你可以建立你的媒體查詢是這樣的：

@media only screen and (device-width: 320px) and (device-height: 768px) and (-webkit-device-pixel-ratio: 2){ 
      .your_css_classes{} 
    }