增加viewport,网站自适应,只需2步

  网上很多,我只说一下我的观点:我网站有百分比也有数值定义,看网上说都要改成百分比觉得太麻烦了,所以各种找,找到一个适合的。

在head中加入:<meta name="viewport" content="width=divice-width,initial-scale='${window.divicePixelRatio}'">,这主要点在于window.divicePixelRation,设备上物理像素和设备独立像素(device-independent pixels (dips))的比例,我也不太懂,不过大致知道了,每个手机都有不同的divicePixelRatio,所以每个手机得到的页面初始缩放比例也不同,页面初始缩放比例就是initial-scale。

加上这个以后一般就可以用了,用手机测试的时候,内容都可以适配,有个logo在网站最上面,宽度占满了整个屏幕,然后这个还是很长,这个后来解决是因为image没有设置百分比,然后设置完百分比就好了。

posted on 2018-03-01 11:34  谢晨波  阅读(138)  评论(0编辑  收藏  举报

导航