H5开发踩坑之旅

72 阅读 0 评论 48 点赞

我是靠谱客的博主甜蜜黑猫，这篇文章主要介绍H5开发踩坑之旅，现在分享给大家，希望可以做个参考。

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
该现象与往返缓存(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的属性兼容性

复制代码

1
2
3
iOS4下不支持position:fixed，可以用absolute替代
fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位

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

复制代码

1
2
设置line-height：normal

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

复制代码

1
2
3
input 设置 line-height
撑开

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

复制代码

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

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

复制代码

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

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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、禁止复制、选中文本

复制代码

1
2
3
4
5
6
7
div {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}

9、设置缓存

复制代码

1
2
3
手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache
<meta http-equiv="Cache-Control" content="no-cache" />

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

复制代码

1
2
3
4
div {
-webkit-touch-callout: none;
}

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

复制代码

1
2
3
4
img{
pointer-events: none;
}

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

复制代码

1
2
3
4
5
移动端开发存在横屏竖屏，所以会存在字体大小发生改变，导致页面布局发生改变
* {
-webkit-text-size-adjust: none;
}

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

复制代码

1
2
3
4
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

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

复制代码

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

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

复制代码

1
2
3
4
*{
-webkit-touch-callout: none;
}

16、calc的兼容处理

复制代码

1
2
3
4
5
6
7
CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。 Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸
div {
width: 95%;
width: -webkit-calc(100% - 50px);
width: calc(100% - 50px);
}

17、消除transition闪屏问题

复制代码

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

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

复制代码

1
2
3
4
5
6
7
8
9
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系统中文输入法输入英文时，字母之间可能会出现一个六分之一的空格

复制代码

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

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

复制代码

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

21、Video的 x5同层播放器

复制代码

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

22、video视频行内播放

复制代码

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

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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禁止安卓手机自动全屏

复制代码

1
2
3
video标签在安卓系统下，默认全屏，通过添加属性可以禁止全屏，
x5-playsinline="true"，切记添加该属性后不能再有x5-video-player-type='h5' x5-video-player-fullscreen='true'，否则还会默认全屏

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

复制代码

1
2
3
4
给video标签添加style样式:
width:100%;height:100%;object-fit:fill;
video标签的父元素应该设置宽高：width:100%;height:100%

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

复制代码

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

27、video播放时自动全屏

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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;鼠标禁用样式，鼠标还是箭头？

复制代码

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

29、设置滚动条的样式

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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);
}