手机端自适应遇到的问题 页面缩放不正常(使用的是flexible.js)

o(╥﹏╥)o。。。。

做了一个项目  包含pc端和手机端,手机端要自适应,用了淘宝的小插件flexible.js,然后页面的缩放出现了问题,算出来的dpr都是对的,但是字体大小始终不对,(现在这个图是对的,错的我没保存,我的设计稿是750的,所以1rem=75px)

手机端自适应遇到的问题 页面缩放不正常(使用的是flexible.js)_第1张图片

找了半天看了插件的源码才发现问题,就是这最关键的一句啊,我之前一直以为这个插件是获取的设备视口的宽度,其实不是,手机端自适应遇到的问题 页面缩放不正常(使用的是flexible.js)_第2张图片

翻了一下这个方法的解释,是获取这个元素css边框集合,所以其实这里获取的是html的宽度。

手机端自适应遇到的问题 页面缩放不正常(使用的是flexible.js)_第3张图片

然而我之前在代码里,给html设置了最小宽度是1000px,所以适配出来的比例始终不对,然后我在手机端又设置了最大宽度是750px,在iPhone6plus上又撑不满,因为在plus上其实宽度是一千两百多,而我设置的html最大的宽度是750px,所以这个缩放一直不正确o(╥﹏╥)o。。。。找了好久,总之就是因为给html设置了宽度影响的

你可能感兴趣的:(常见问题记录,常用布局,vue,页面缩放不正确,flexible.js,手机端适配)