html移动端浏览器宽度默认980以及如何自适应

前段时间一直开发vue项目，创建项目都是使用的脚手架，很多细节都没有太多关注，今天突然安排做一个简单的移动端页面，只是要求要用原生来实现，结果遇到了未曾想到的问题。如下图：

图上页面宽度固定是980px，而我选的移动端设备宽度明明是375px，而且不论选择其他哪种分辨率结果都一样，甚至我还换了不同浏览器做测试，结果自然都一样，因为根本不是浏览器的问题。
通过百度得知，safari 中 viewport 默认宽度为 980px。也就是说，如果你不指定 viewport 的宽度，那么就会默认按980处理。
回过头来，为什么之前没有遇到过这种问题，因为之前一直用的脚手架创建项目，在生成的html中已经帮你处理了相关细节，如下图：

此处做一下记录：

width=device-width：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=0.5：表示最小的缩放比例
maximum-scale=2.0：表示最大的缩放比例
user-scalable=yes：表示用户是否可以调整缩放比例，默认值是yes，可选值no

所以只需要在标签中添加以下代码即可解决标题的问题

<meta name="viewport" content="width=device-width,initial-scale=1.0">

效果如下：

说在最后的话：脚手架虽好，但也要理解它，并不是会用就行了。