移动端开发

• viewport

  • <meta name="viewport" content="width=device-width,user-scalable=no,
    height=device-height,user-scale=no.initial-scale=1.0,
    minimun-scale=1.0,maximun-scale=1.0,target-densitydpi=device-dpi"/>

    • device-width/数值（大部分安卓手机不支持，苹果手机支持）
    • height可以不设置，会根据宽度自动缩放。
    • dpi//ios不支持，安卓大部分支持。
    • ios10之后的系统不支持user-scale, maximun-scale属性。
    • 常用设置
      • <meta name="x5-orientation" content="portrait(landscape)" /> //强制横（竖）屏   x5内核：微信/qq/qq浏览器
      • <meta name="x5-fullscreen" content="true" /> //设置全屏显示
      • <meta name="screen-orientation" content="portrait(landscape)" /> //UC浏览器强制横竖屏
      • <meta name="fullscreen" content="yes" /> //UC浏览器全屏显示
        • 其它浏览器没有这些设置（其他浏览器该怎么办？）
      • <meta name="format-detection" content="telephone=no,email=no" /> //禁止识别电话号码和邮箱地址；
      • href="tel:号码"    href="mailto:号码" //局部设置电话或者邮件的识别；
• css初始化：

  a,input,button{
              -webkit-tap-highlight-color:rgba(0,0,0,0); 
          }
          input,button{
              -webkit-appearance: none;
              border-radius: 0; 
          }
          body{
              margin:0;
              -webkit-user-select:none;
              -webkit-text-size-adjust: 100%;
          }
          body *{
              -webkit-user-select:none;
              font-family: Helvetica;
          }

   

• 媒体查询
  • @media
    • • all  媒体类型
      • and（） 链接作用
      • only 特定设备
      • not 排除设备
  • 媒体特性
    • • (max-width:500px)
      • (min-width:300px)
      • (orientation:portrait)竖屏
      • (orientation:landscape)横屏
      • (-webkit-min-device-pixel-ratio:2)像素比
• 常见默认样式设置
  • 清除点击高亮颜色：a,input,button{-webkit-tap-highlight-color:rgba(0,0,0,0)} //全透明
  • <input type="button">在ios下会变成圆角，清除方法：input,button{-webkit-appearance:none; border-radius: 0;}
  • 字体设置：body{font-family: Helvetica;} //所有设备会有的一个英文字体，中文字体适应设备即可。
  • 禁止字体缩放（一般在横竖屏切换的时候）：-webkit-text-size-adjust:100%;
  • 禁止选中文字（解决长安选中的问题，在事件章节填坑。）：-webkie-user-select:none; //兼容性并不好，安卓下没有效果；
• 其它问题
  • FontBoosting //一般不会碰到（通常在一段文字，没有给它设置高度，在webkit内核下，文字的大小被浏览器放大了）
    • 解决办法：设置高度或者最大高度；
  • 固定定位的兼容问题：
    • 现在大多数的浏览器都支持固定定位（不过还是有一些抖动的小问题）；
    • 这个坑到事件才能完整填上；
• 移动端适配方案
  • 页面设置固定宽度320px，margin居中，左右留白用背景填充
  • 通过media，根据不同分辨率去设置不同的样式
  • 通过，百分比，flex或者rem等手段，等比例缩放
  • rem
    • em相对于字体大小 font-size=16px  1em=16px;
    • ren相对于根节点html的字体大小  html字体大小为16px  1rem=16px；
  • 头部和底部的固定不能用固定定位，会有兼容问题，用绝对定位。html和body设置高度100%；html：overflow:hidden; body:overflow:auto
    • 6.2.4的安卓微信用的x5内核qq浏览器可能有兼容问题；可以用fixed代替；
    • fixed在一些老版本的国内浏览器中可能会有问题；
    • 所以需要通过判断来做取舍；
    • 在苹果下input框弹出虚拟键盘会影响绝对布局的问题。
  • 移动端尽量不要使用click事件，一般会有300毫秒的延迟。用touch事件代替。
    • touchstart == mousedown
    • touchmove ==mousemove
    • touchend == mouseup
  • addEventListener/removeEventListener
• touchEvent
  • 事件对象e,不是ev；
  • touches 当前屏幕上所有的手指的列表；
  • targetTouches 位于当前对象上的手指列表；
  • changedTouches 涉及当前事件的手指的一个列表；
  • 移动端的touchmove事件需要阻止掉默认事件，防止在某些手机上拖拽失效；
    • document.ontouchmove=function(e){e.preventDefault}