移動端開發

• 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}