移動端

只是一個文檔總結，純粹是喜歡SF的Markdown。

---

HTML

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

CSS

• X軸上採用百分比
• 字體大小以及部分不能用百分比衡量者，採用REM單位

JS

配置頁面根font-size大小

(function ( doc, win ) {
    var win = window;
    var doc = win.document;
    var baseWidth = 640;
    var documentHTML = doc.documentElement;
    function setRootFont(){
    var docWidth = documentHTML.getBoundingClientRect().width;
    var scale = docWidth / baseWidth;
    if (docWidth > 640) {
    scale = 1;
    }
    var p = scale*100;
    documentHTML.style.fontSize = p + 'px';
    }
    setRootFont();
    win.addEventListener('resize', setRootFont, false);
})( document, window );

---

表單

• 表單之 - 各個瀏覽器自帶的樣式

  • 這個問題不只是手機端還有PC端，張鑫旭大神有詳解

• 表單之 - 輸入框的光標大小

  • 解決： 注意排查line-height值，不要使用line-height垂直居中，用上下同padding值

• 表單之 - 去掉input和select的默認樣式

  /* input和select的默認樣式取消 */
  input,select{
      outline: transparent dotted;border: 0;background: #fff;
      -webkit-appearance : none;
      -moz-appearance: none;
      -o-appearance: none;
      appearance: none;
  }
  
  /* input的placeholder修改，至於select下的option的字體顏色能夠直接控制select的color屬性 */
  input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
      color: #ccc;font-size: 13px;
  }
  input:-moz-placeholder,textarea:-moz-placeholder {
      color: #ccc;font-size: 13px;
  }
  input::-moz-placeholder,textarea::-moz-placeholder {
      color: #ccc;font-size: 13px;
  }
  input:-ms-input-placeholder,textarea:-ms-input-placeholder {
      color: #ccc;font-size: 13px;
  }

• 表單之 - 重寫按鈕的樣式

  • CODEPEN

• 表單之 - iOS機型點擊輸入框頁面會放大

  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

  width - viewport的寬度 height - viewport的高度
  initial-scale - 初始的縮放比例
  minimum-scale - 容許用戶縮放到的最小比例
  maximum-scale - 容許用戶縮放到的最大比例
  user-scalable - 用戶是否能夠手動縮放

滾動條

• 修改樣式

  &::-webkit-scrollbar {
    width: 4px
  }
  &::-webkit-scrollbar-track {
    border-radius: 4px
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .1);
    border-radius: 6px
  }

• 隱藏滾動條可是依然能夠滾動

  &::-webkit-scrollbar {
    display:none
  }

  可是上述僅用於 webkit 瀏覽器，其餘瀏覽器見過一種思路是：在原有的 div外部套一層div，樣式內寫overflow：hidden; 使這個外部的div寬度小於內部出滾動條的div.內部div的樣式爲overflow-y:auto;overflow-x:hidden;。這樣，內部div的滾動條就被隱藏起來了，可是，此時依然能夠滾動。純css，div隱藏滾動條，保留鼠標滾動效果。

iOS

• iOS中彈性拉伸的現象

  • 解決：禁用那個層或者body的touchstart事件的默認行爲

    // disabled touchstart event
    document.addEventListener('touchstart',function(event){
        event.preventDefault();
    }, false);

• iOS禁用音視頻自動播放

  • 這個是蘋果官方明確提出的，爲了用戶的利益。此處的iOS涵蓋了（iPhone和iPad）

  • 解決：這個其實不能根本上解決問題，只能借用微信環境下，微信的 js-sdk 來實現自動播放。因此iOS的Safari瀏覽器依然是死角，不能作到自動播放。

    wx.ready(() => {
        document.getElementById('audio').play();
      })

  • 追加：碰見 touchstart 和 touchend 事件，在 touchstart 時觸發音頻 a，在 touchend 時觸發音頻 b，可是若是長按時間過長，會出現 b 不播放或者播放延遲的現象。緣由是，音頻資源沒加載完成。

    // 預設 this 環境
      function preload() {
        wx.ready(() => {
          wx.getNetworkType({
            success: () => {
              this.a = new Audio('a.mp3');
              this.b = new Audio('b.mp3');
              this.a.loop = true;
              this.a.load();
              this.b.load();
            }
          });
        });
      }
      
      // touchstart and touchend
      function start() {
        this.a.play();
      }
      function end() {
        this.a.pause();
        this.b.play();
      }

• iOS中DOM的onclick事件無效

  • 解決：在該DOM上css上添加{cursor: pointer}

個例

• Chrome瀏覽器默認最小字體是12px

  • 解決：使用適配手機的縮放。（ transform: scale(...) translate(...) ）
  • CODEPEN DEMO

• Safari無痕模式下不支持sessionStorage.setItem()

  • 解決一：業務場景可以使用全局變量處理
  • 解決二：Safari Private browsing mode appears to support localStorage, but doesn't

學習資料

• 使用Flexible實現手淘H5頁面的終端適配
• 前端頁面佈局常見問題/已踩過的坑大雜燴

---

——好記性不如爛筆頭