参考文章:
https://segmentfault.com/a/1190000004978598
https://segmentfault.com/a/1190000004978598
https://www.w3cplus.com/javascript/viewport-device-scroll-document-size.html
1.我们现在有一个手机,它的屏幕物理宽度(物理分辨率)是1080px,
它的“设备宽度”(窗口宽度)是375px。
2.我们写一张网页html,不设置网页宽度,就是自适应浏览器宽度。就是流体宽度。
这时候如果直接把这张网页放到手机就是放到1080px的浏览器窗口里,网页就自适应为1080px。这样网页就太小了。
3.我们用一个中间层viewport放到浏览器窗口里,viewpot的宽度默认是1080px,这是网页放在viewport上,比浏览器窗口(375px)大,这时候网页就有横向滚动条.通过滑动来浏览页面.
然后我们通过设置viewport宽带(原本默认1080px)等于浏览器窗口宽度(375px),于是viewport就变成了375px。所以viewport上的页面也变成了375px。
代码是: <meta name="viewport" content="width=device-width, initial-scale=1.0">
4.再把网页自适应到viewport上,网页就自适应375px的viewpost,就变成了375px的网页!
viewport标签,在pc端是不会生效,是在移动设备端才会生效。
所以写个<viewport>标签,就能使得网页,当它在移动设备上时候就能适配移动端