移动端适配&常见问题

适配

meta标签

什么是适配？为什么要做适配？

• 适配：百分百还原设计图（等比）
  • 没有加viewport meta标签时：等比 文字太小了整个用户体验太差
  • 加了viewport meta标签时：不等比 占据的实际尺寸（英寸）一样

三种适配方案

• 百分百适配，rem适配，viewport适配

rem

• chorm下的默认font-size = 16px
• chorm下最小的font-size = 12px
• IE6下元素最小高度为19px,可以将其父元素的fontSize设置为0，只能解决到2px
• em参照与自己的font-size
• rem参照于根标签(html)的font-size与其他标签无关

rem适配

• 想让一个1rem的元素不管在什么设备上都占据满屏
  • 1rem最终渲染的px值为布局视口所代表的值
  • 根标签的fontsize变为布局视口所代表的值
• 使用rem适配时，必须要先使用meta标签，把布局视口变成完美视口
• 元素的width的大小为元素的宽度/布局视口的宽度rem
• 改变了每个元素在不同设备上所占据的css像素的个数！！！
  • 优点：使用了完美视口
  • 缺点：px到rem的转化比较复杂

(function(){
    var styleNode = document.createElement('style');
    var width = document.documentElement.clientWidth /16;
    styleNode.innerHTML="html{font-size:"+ width +"px !important}"
    document.head.appendChild(styleNode);
})()

设计图的要法

• 要一张750*1334的图(分辨率)
• 如果图片大小固定，可以使用viewport适配

viewport适配

• 改变布局视口的大小(调整initial.scale的比例)
• meta不能有width=device-width
• 将每个设备的布局视口变为设计图的尺寸
  • 优点：所量即所得
  • 缺点：没有使用完美视口

  如果设备的width的大小为320
  可以把每一个设备的布局视口变成320
  (function(){
    var width = 320
    var scale = document.documentElement.clientWidth /width
    var metaNode = document.querySelector("meta[name ='viewport']");
    metaNode.setAttribute("content","initial-scale="+ scale +",user-scalable=no");
  })()
  

如何实现一物理像素的适配方案

• 使用rem适配方案做布局，使用initial-scale的比例缩放

  (function(){
    var dpr = window.devicePixelRatio||1
    var styleNode = document.createElement('style');
    var width = document.documentElement.clientWidth *dpr /16;
    styleNode.innerHTML="html{font-size:"+ width +"px !important}";
    document.head.appendChild(styleNode);

    var scale = 1/dpr;
    var metaNode = document.querySelector("meta[name = 'viewport']");
    metaNode.setAttribute("content","width=device-width,initial-scale=" + scale +",user-scalable=no");
  })()

移动端事件

querySelector的坑

• document.querySelector静态获取dom节点
• document.getElementsByClassName动态获取dom节点

触屏事件

• 触屏事件 建议使用dom2的形式去绑定
  • touchmove 能不能单独触发？在移动端是没有办法单独触发的
• 鼠标事件
  • mousemove能不能单独触发？在pc端是可以单独触发的

全面禁止移动端默认事件

• 文字默认选中
• 橡皮筋效果

  document.addEventListener('touchstart',function(ev){
    ev= ev||event
    //return false dom0的禁止默认行为
    ev.preventDefault();//dom2的禁止默认行为
  })

自定义右键菜单

• 首先禁止document上的默认行为
• 右键事件oncontextmenu

  var wrap = document.querySelector('#wrap');
  wrap.style.display ="none"
  document.oncontextmenu = function(ev){
    ev = ev||event;
    var x = ev.clientX;
    var y = ev.clientY;

    wrap.style.left = x+'px';
    wrap.style.top = y+'px';

    wrap.style.display ="block"
    ev.preventDefault();
  }

  document.onclick = function(ev){
    ev = ev||event;
    wrap.style.display ="none"
  }

移动端的坑(事件点透)

• 目标：一个a标签在div的下面，点击一次a标签时，把div的display变为none，不触发a标签
• 实际效果：点击a标签后，div消失，a标签触发
• 原因：PC端的事件可以在移动端执行，PC端事件执行时有300ms的延迟(浏览器需要时间看一下后面到底触发什么事件)
  • 移动端事件：touchstart
  • PC端事件：onclick，onmousedown

    var aNodes = document.querySelectorAll('a');
        document.addEventListener('touchstart',function(ev)){
            ev=ev||event;
            ev.preventDefault();
        }

        for(var i=0;i

移动端的其他事件

• changedTouches:触发当前事件的手指列表(只能有一个？)
• targetTouches:触发当前事件时,元素身上的手指列表
• touches:触发当前事件时,屏幕上的手指列表

    testNode.addEventListener('touchend',function(ev){
            ev= ev||event;
            setTimeout(function(){
                testNode.innerHTML = "changed:"+ev.changedTouches.length+"
"+"target:"+ev.targetTouches.length
                +"
"+"touches:"+ev.touches.length;
            },200)
        })

移动端模板

• 第一步:viewport meta标签
• 第二步:移动端事件的默认行为全面禁止掉
• 第三步:挑选一个适配方案

  document.addEventListener('touchstart',function(ev){
    ev= ev||event;
    ev.preventDefault()
  })

  (function(){
    var styleNode = document.createElement('style');
    var width = document.documentElement.clientWidth /16;
    styleNode.innerHTML = "html{font-size:"+width+"px !important}"
    document.head.appendChild(styleNode);
  })()

移动端常见问题

• 禁止电话与邮箱
  
  
• 链接&按钮背景高亮问题(一般为a，input,button)
  
  -webkit-tap-highlight-color: rgba(0,0,0,0);
• 圆角问题(input的圆角在ios下渲染太过分)
  
  /*处理圆角渲染太过分*/-webkit-appearance: none;