自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结

一、先明白几个概念

phys.width:

device-width:

一般我们所指的宽度width即为phys.width，而device-width又称为css-width。

其中我们可以获取phys.width即width通过document.documentElement.clientWidth;而获取css-width通过 window.screen.width获取。如iphone6的phys.width为750px，而css-width为375px。

二、明白一个浏览器默认行为。

试想，浏览器如果把电脑端的980px的网页展现在宽度为750px的iphone6手机屏上，势必会放不下，手机端横向会出现滚动条，怎么阻止这种情况呢，很简单，浏览器默认一个虚拟窗口，不同浏览器有不同的虚拟窗口宽度的默认值如：safari iphone：980px;

opera:850px; Andriod webkit:800px;IE:974px;然后会把这个980px虚拟窗口装进宽度为750px的iphone6中，当然这样的话必须缩放，这就是为什么在手机中展现电脑端页面没有出现横向滚动条，而且字迹明显变小的原因。

三、讲解meta name= viewport content= width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1

meta标签中，width有两个含义，第一、width为phys.width，第二，width也为虚拟窗口的width。这样就会有两个结果：

1、此时的iPhone6的phys.width也变成了css-width即375px，我们可以通过document.documentElement.clientWidth获取得到此时phys.width确实为375px。

2、如你设计的是375px的手机端页面，此时的虚拟窗口的宽度也为375px，再装进phys.width为375px的手机，当然如设计稿一样的效果，不会缩放，也不会出现横向滚动条。

四、对响应式布局，媒体查询的影响

@media only screen and (min-width: 350px) and (max-width: 480px){.....................}

如没有meta标签，此时的width当然即为phys.width，iPhone6就不会执行上边的括号里边的代码，但是有了meta标签以后呢，width变成了css-width，即为375px,，所以是会执行代码的。

五、论meta标签的影响

从上边可以看出，有了meta标签以后，原本的iPhone6，即像素比为2的手机，可以按照css-width相同的像素比为1的手机一样正常显示，像素比更高的手机也能正常显示。当然现在andriod的2K屏在meta标签的帮助下也能正常显示。即对于开发者来说，已经可以不管手机的像素比，只需按照css像素编写代码即可。

参考链接： https://www.jb51.net/article/121531.htm     
参考链接：  https://www.jb51.net/article/121524.htm

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持!

最新评论