H5开发踩坑之旅

1、H5页面在IOS后退不刷新

该现象与往返缓存(bfcache)有关系

//ios端浏览器回退功能不刷新页面，android端不存在
let isIos = /^.*((iPhone)|(iPad)|(Safari))+.*$/;
if (isIos.test(navigator.userAgent)) {
    window.onpageshow = function(event) {
        if (event.persisted) {
            window.location.reload()
        }
    };
}

或者
window.onunload = function () {};

2、ios对fixed的属性兼容性

iOS4下不支持position:fixed，可以用absolute替代

fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位

3、input 的 placeholder会出现文本位置偏上

设置line-height：normal

4、ios端 input框内容显示不全

input 设置 line-height  撑开

5、ios中 input框失去光标，底部顶起问题

设置失去焦点事件  window.scroll( 0 , 0 )，失去焦点时重新设置高度

6、iOS下取消input在输入的时候英文首字母的默认大写

<input type="text" autocapitalize="none">

7、设置 input 和 textarea 的 placeholder 属性样式

placeholder  属性是 css3 中新增加的属性，IE9和Opera12以下版本的CSS选择器均不支持占位文本；

 只需在冒号前面添加  input 和   textarea  （ 手机端只使用  webkit  形式即可 ）
 
   ::-webkit-input-placeholder { /* WebKit browsers */
　　		color:#999;font-size:16px;
　　}
　　:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
　　		color:#999;font-size:16px;
　　}
　　::-moz-placeholder { /* Mozilla Firefox 19+ */
　　		color:#999;font-size:16px;
　　}
　　:-ms-input-placeholder { /* Internet Explorer 10+ */
　　		color:#999;font-size:16px;
　　}

8、禁止复制、选中文本

div {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
      user-select: none;
}

9、设置缓存

手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache

<meta http-equiv="Cache-Control" content="no-cache" />

10、长时间按住页面出现闪退

div { 
    -webkit-touch-callout: none; 
}

11、移动端禁止图片长按和点击img标签放大图片

img{ 
    pointer-events: none;
}

12、阻止旋转屏幕时自动调整字体大

移动端开发存在横屏竖屏，所以会存在字体大小发生改变，导致页面布局发生改变

* {
    -webkit-text-size-adjust: none;
}

13、iOS和安卓下存在难看的点击的高亮效果

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

14、禁止 iOS 识别长串数字为电话

<meta name="format-detection" content="telephone=no" />

15、禁止 iOS 弹出各种操作窗口

*{
    -webkit-touch-callout: none;
}

16、calc的兼容处理

CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。 Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸

div { 
   width: 95%; 
   width: -webkit-calc(100% - 50px); 
   width: calc(100% - 50px); 
}

17、消除transition闪屏问题

 /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
    -webkit-transform-style: preserve-3d;
    
/*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/ 
    -webkit-backface-visibility: hidden;

18、CSS动画页面闪白,动画卡顿

1、尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位

2、开启硬件加速

div{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

19、iOS系统中文输入法输入英文时，字母之间可能会出现一个六分之一的空格

value = value.replace(/\u2006/g, '');

20、浮动子元素撑开父元素盒子高度

1、父元素设置为 overflow: hidden;
2、父元素设置为 display: inline-block; 

21、Video的 x5同层播放器

X5是腾讯基于Webkit开发的渲染引擎，它提供了一种名叫「同层播放器」的特殊video元素以解决遮盖问题
<video id="video" class="video" controls="controls" playsinline x5-video-player-type="h5">
    <source src="./video.mp4" />
</video>

22、video视频行内播放

默认情况下，点击video播放会全屏播放，如果想要视频在局部内可以播放的话，可以设置：x5-playsinline

23、video获取视频的第一帧作为背景图；

window.onload = function(){
   var video = document.getElementById('video');
   //第一帧图片与原视频的比例
   var scal = 0.8;
   //监听页面加载事件
   video.addEventListener('dataLoad',function(){
     //创建一个画布
     var canvas = document.createElement('canvas');
     canvas.width = video.style.width*scal;
     canvas.height = video.style.height*scal;
     //绘制图片
     canvas.getContentext('2d').drawImage(video,0,0,canvas.width,canvas.height);
     //设置标签的poster属性
     viseo.setAttribute("poster",canvas.toDataURL("image/png"));
     
   });
}

24、Video禁止安卓手机自动全屏

video标签在安卓系统下，默认全屏，通过添加属性可以禁止全屏，

 x5-playsinline="true"，切记添加该属性后不能再有x5-video-player-type='h5' x5-video-player-fullscreen='true'，否则还会默认全屏

25、video播放视频时，不能完全覆盖的问题

给video标签添加style样式:  width:100%;height:100%;object-fit:fill;

video标签的父元素应该设置宽高：width:100%;height:100%

26、video的poster属性在很多手机浏览器不生效

通常把video隐藏，用一张图片作为封面。最好不要用{ display: none }或者{ width:0;height:0; }隐藏video，视频元素会处于未激活的状态，给后续的处理带来麻烦。可以将视频设置成1×1像素大小

<video width="1" height="1" controls loop="loop" src=""></video>

27、video播放时自动全屏

iPhone、x5内核可以增加playsinline属性，让video内联播放，Android不可以，且不同浏览器的表现不同

<video class="video-source"
     width="100%"
　　 height="240px"  
     controls   /*规定浏览器为该视频提供播放控件*/  
     style="object-fit:fill"  /*  style会让 Android / web 的视频在微信里的视频全屏，如果是在手机上预览，会让视频的封面同视频一样大小*/
     webkit-playsinline="true"  /*ios 10中设置可以让视频在小窗内播放*/  
     x-webkit-airplay="true"  /*支持Airplay的设备（如：音箱、Apple TV)播放*/ 
     playsinline="true"  /*IOS微信浏览器支持小窗内播放*/ 
     x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/
     x5-video-orientation="h5" /*播放器方向，landscape横屏，portraint竖屏，默认值为竖屏默认值portraint。无论是直播还是全屏H5一般都是竖屏播放，但是这个属性需要x5-video-player-type开启H5模式*/
     x5-video-player-fullscreen="true" /*全屏设置，设置为 true 是防止横屏*/
     x5-playsinline
     preload="auto" 
</video>

28、设置了cursor: not-allowed;鼠标禁用样式，鼠标还是箭头？

设置了 pointer-events:none; 所致。只需设置   pointer-events: auto;

29、设置滚动条的样式

div{
    border-left:1px solid #eee;
    height:100%;
    overflow-x: hidden;
    overflow-y: scroll;
  }
div::-webkit-scrollbar {
    width: 3px; 
    // height: 4px;
    // background: red;
    border-radius: 2px;
}
div::-webkit-scrollbar-track {
    // -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 2px;
    background: #fff;
}
div::-webkit-scrollbar-thumb {
    border-radius: 2px;
    // box-shadow: inset 0 0 5px #ddd;
    background: #ddd;
 }


//======================滚动条样式==========================
/* Let's get this party started */
::-webkit-scrollbar {
    width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
} 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); 
}

30、overflow: auto在iOS有兼容问题，卡顿滑不动

-webkit-overflow-scrolling: touch;