HELLO,WEBAPP.基础知识

1、先明白几个概念

phys.width:

device-width:

    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">


    <meta content="telephone=no,email=no" name="format-detection">

content属性值 :

     width:可视区域的宽度，值可为数字或关键词device-width

     height:同width

     intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放

     maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，

              maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。

     user-scalable:是否可对页面进行缩放，no 禁止缩放

 

---

 

通常咱们所指的宽度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。

 

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

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

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

 

3、讲解

meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"

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

第1、此时的iPhone6的phys.width也变成了css-width即375px，咱们能够经过document.documentElement.clientWidth获取获得此时phys.width确实为375px。

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

 

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

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

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

 

5、论meta标签的影响

从上边能够看出，有了meta标签之后，本来的iPhone6，即像素比为2的手机，能够按照css-width相同的像素比为1的手机同样正常显示，像素比更高的手机也能正常显示。固然如今andriod的2K屏在meta标签的帮助下也能正常显示。即对于开发者来讲，已经能够无论手机的像素比，只需按照css像素编写代码便可。