一、先明白几个概念
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即