Home>>KnowLedge>>知识

论meta name= viewport content= width=device-width initial-sc

推荐网站:云服务器技术网阿里云优惠网阿里云代理商腾讯云代理商腾讯云优惠网

 一、先明白几个概念
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。这样就会有两个结果:
第一、此时的iPhone6的phys.width也变成了css-width即375px,我们可以通过document.documentElement.clientWidth获取得到此时phys.width确实为375px。
第二、如你设计的是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像素编写代码即可。
 
 

云计算技术由云服务器技术网阿里云优惠网阿里云代理商腾讯云代理商腾讯云优惠网提供

·如何建设并推广运营外贸站
·网站如何建设?
·seo快排和seo按天收费是真的吗?
·网站运营需要注意的几点问题
·企业网站改版需要考虑哪些问题
·网站每天更新几篇文章
·seo关键词排名的技巧