H5兼容VIdeo

<video crossorigin="anonymous" id="myVideo" preload="auto" autobufer="true" x-webkit-airplay="allow" playsinline="true" webkit-playsinline="true" x5-video-player-type="h5-page" loop src="medias/all.mp4">

---

H5让兼容安卓和IOS调用相机

<input type="file" id="file" style="display:none;" accept="image/*" mutiple="mutiple" />
//事件使用onchange ，oninput事件IOS端存在兼容性问题

---

移动端debug

<script type="text/javascript" src="https://cdn.bootcss.com/eruda/1.2.6/eruda.min.js"></script>
<script>eruda.init();</script>

---

input file 拍照上传IOS图片旋转问题处理

解决方法：exif.js+canvas
利用exif.js读取照片的拍摄信息，通过Orientation属性

EXIF.getData(imgFile,  function() {  //imgFile图片数据
    var Orientation = EXIF.getTag(this, 'Orientation');   
    return Orientation //Orientation返回的参数 1 、3 、6 、8
}); 

Orientation 参数 1、3、6、8 对应所需要旋转的角度

1   0°
3   180°    
6   顺时针90°
8   逆时针90°

获取到旋转信息后利用canvas rotate 旋转后使用drawImage绘制图片（需要注意的是旋转后的x，y坐标也会跟随旋转），最后利用toDataURL导出为base64数据（<img>标签src属性可以直接赋值base64数据）

---

使用FromData提交表单，包括文件上传

原生

<!--HTML部分-->
<form action="">
        <label for="">
            姓名: <input type="text" name="name">
        </label>
        <label for="">
            文件：<input id="file" type="file" name="file">
        </label>
        <label for="">
            <input type="button" value="保存">
        </label>
</form>
//获取按钮
var btn = document.querySelector('[type=button]');
//绑定事件
btn.onclick = function () {
    //获取input标签
    var file = document.querySelector('[type=file]');
    // 新建FormData对象
    var formData = new FormData();
    // 取得input标签中的文件。注：input标签中的文件可以选择多个
    formData.append('upload', file.files[0]);
    //创建XMLHttpRequest，用这个来发送数据
    var xhr = new XMLHttpRequest;
    /*初始化HTTP请求参数(请求方式,url,是否同步)*/
    xhr.open('post', 'file.php');
    
    /*
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    设置请求头的contentType
    */
    
    // 监听上传进度
    xhr.upload.onprogress = function (ev) {
    // 事件对象
    // console.log(ev);

        var percent = (ev.loaded / ev.total) * 100 + '%';

        console.log(percent);

        progress.style.width = percent;
    }

    xhr.send(formData);

    xhr.onreadystatechange = function () {
    //status状态为200 表示请求成功，readystate为4表示对象传递完毕或者准备就绪 
            if(xhr.readyState == 4 && xhr.status == 200) {
            }
    }
}

jQuery

//绑定提交事件
function upload() {
  //获取form表单元素
  var f =   document.getElementById("myForm");
  //使用表单元素来构造FromData
 var myform = new FormData(f);
 $.ajax({
  url : "/Library/test/upload",
  type : "post",
  dataType : "json",
  data : myform,
  cache: false,                      // 不缓存
  processData: false,                // jQuery不要去处理发送的数据
  contentType: false,                // jQuery不要去设置Content-Type请求头
  success : function(data) {
    console.log(data);
  }
 });
}

参考：https://blog.csdn.net/candy_27/article/details/83961635

---

html2canvas 5.0 生成图片解决污染模糊问题

<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
var dpr = window.devicePixelRatio;
var canvas = document.createElement('canvas');
  canvas.width = window.innerWidth*dpr;
  canvas.height = window.innerHeight*dpr;
  canvas.getContext('2d').scale(dpr, dpr);
  html2canvas($(".page6-box")[0],{
    useCORS:true,//启用跨域图绘制
    canvas:canvas,//指定自定义canvas -解决图片模糊
    onclone:function(cloneDom){
      //对克隆出来的dom进行一些操作
    },
    onrendered:function(canvas){
      canvas.toDataURL('image/jpeg');
    }
  });

---

css reset

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
    font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

iOS系统禁止微信客户端修改字体大小：

body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
}

Android 禁止微信客户端修改字体大小：

<script>
           if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
               handleFontSize();
           } else {
               if (document.addEventListener) {
                   document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
               } else if (document.attachEvent) {
                   document.attachEvent("WeixinJSBridgeReady", handleFontSize);
                   document.attachEvent("onWeixinJSBridgeReady", handleFontSize);  }
           }
           function handleFontSize() {
               // 设置网页字体为默认大小
               WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
               // 重写设置网页字体大小的事件
               WeixinJSBridge.on('menu:setfont', function() {
                   WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
               });
           }
</script>

滚动条默认样式

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

image.png