这是今天遇到的一个问题,记录一下
设计稿是按照750设计的,界面也是按照750开发的,但是为什么线上界面显示宽度是980?
重新去翻了下静态文件,发现静态文件不存在这个问题,以iphone6为例,显示宽度正常,为375。
那就去线上找问题吧,应该是在后期开发过程中产生的。通过查找发现在<head>部分丢掉了一段内容:
按设备大小缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
原因:我们大部分移动设备默认的viewport都是980px。
PC页面到手机页面会等比列的缩小,原先电脑如何显示那么在手机上就如何显示,所以手机就会“模拟”980px的宽度去显示,至于为什么是980px,那得去问下浏览器设计大佬了。
也由此可见,虽然这个按设备大小缩放的代码在开发H5的时候是必备的,但是自己在平时开发当中没有深究过,以至于这次遇到这样简单的问题还一脸懵。