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