手机端视口宽度980的问题

这是今天遇到的一个问题,记录一下
设计稿是按照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的时候是必备的,但是自己在平时开发当中没有深究过,以至于这次遇到这样简单的问题还一脸懵。

推荐阅读更多精彩内容