初始化不同宽度的移动浏览器

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{} 
    }