视口里的maximum-scale=1.0,a minimumm-scale=1.0可以省略不写吗

明白一个浏览器默认行为

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

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

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

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

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

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

五、论meta标签的影响

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

我要回帖

更多关于 minimum 的文章

 

随机推荐