记录一次移动开发的bug（二） - pod4g/tool GitHub Wiki

记录一次移动开发的bug

1. 出现问题的机型：MX4 Pro、Samsung Note4、MotoX Pro

他们的screen.width分别是 1536、1440、1440，pr分别是 4、4、3.5，
可视区大小分别为384、360、480

2. 出现问题的原因

   PC布局的Media Query 是 @media only screen and (min-device-width: 1280px)

   由于这三者的device-width都要大于1280，所以走的PC布局，但其实屏幕的物理宽度到不到他们的设备宽度，所以出现水平滚动条

3. 解决方案

   在移动布局的Media Query 加上

   only screen and (-webkit-min-device-pixel-ratio: 3) and (max-width:1028px)

   即让pr大于3的，可视区窗口小于1028的，都走移动布局，就能把这3种机型兜住。

4. 总结

  按照pr和device-width来进行布局是不稳定的。因为pr和device-width千差万别

  而按照视口大小

 （max-width、min-width）来布局是靠谱的，因为有viewport的meta标签来兜底。