js移动端rem响应式和meta标签

rem自适应

也可以这么写

(function (doc, win) {
            var docEl = doc.documentElement, 
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                  var clientWidth = docEl.clientWidth;
                   if (!clientWidth) return;
                   if(clientWidth>=640){ 
                          docEl.style.fontSize = '100px';
                   }else{ 
                            docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                         } 
                   }; 
             if (!doc.addEventListener) return;
             win.addEventListener(resizeEvt, recalc, false);  
            doc.addEventListener('DOMContentLoaded', recalc, false); 

})(document, window);

meta标签

 

  
  
  
  
  
  
  

 

body{
    -webkit-tap-highlight-color: rgba(255,255,255,0);/*同上取消点击背景*/
}

作者：陈华
链接：https://www.zhihu.com/question/39081139/answer/81689906
来源：知乎

一、天猫
 
     
             
     
     
     

 
二、淘宝












 
三、京东





 
四、网易





 
五、百度



 
meta指元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。
手机端特有的有哪些？
     
     
     

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
width - viewport的宽度 height - viewport的高度   
initial-scale - 初始的缩放比例  
minimum-scale - 允许用户缩放到的最小比例   
maximum-scale - 允许用户缩放到的最大比例  
user-scalable - 用户是否可以手动缩放
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
在web app应用下状态条（屏幕顶部条）的颜色；
默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。
注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方
（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码。