只是一个文档总结，纯粹是喜好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页面的终端适配
• 前端页面规划常见题目/已踩过的坑大杂烩

——好记性不如烂笔头