移动端H5页面开发坑点指南

前言

在平时的H5移动端开发时，我们难免会遇到各种各样的坑点，这篇文章就带着大家来看看怎么解决，文章较长，建议收藏方便以后查阅！

前方高能！

视频兼容相关 在安卓中，直接使用原生 video 会导致全屏播放，盖住所有元素，因此使用 x5 播放器。但是 x5 播放器还是存在问题，虽然不会盖住元素，但是会自己添加特效（盖一层导航栏蒙层）。

<video
  id='live-player'
  controls={false}
  preload="auto"
  playsInline
  mtt-playsinline=”true“
  webkit-playsinline='true'
  x5-video-player-type='h5'
  x5-video-orientation='portrait'
  x5-playsinline='true'
/>
复制代码

这样可以在安卓下使用 x5 播放器， playsInline 及 webkit-playsinline 属性可以在 iOS 环境下启用内联播放。但是通过属性设置内联播放兼容性并不怎么好，所以这时候我们需要使用 iphone-inline-video 这个库，通过 enableInlineVideo(video) 就可以了。

canvas在retina屏模糊

只需要将画笔根据像素比缩放即可

run(canvasEl) {
    const canvas = canvasEl;
    const ctx = canvas.getContext('2d');
    const devicePixelRatio = window.devicePixelRatio || 1;
    const backingStorePixelRatio = ctx.webkitBackingStorePixelRatio ||
    ctx.mozBackingStorePixelRatio ||
    ctx.msBackingStorePixelRatio ||
    ctx.oBackingStorePixelRatio ||
    ctx.backingStorePixelRatio || 1;

    const ratio = devicePixelRatio / backingStorePixelRatio;
    if (devicePixelRatio !== backingStorePixelRatio) {
      const oldWidth = canvas.width;
      const oldHeight = canvas.height;

      canvas.width = oldWidth * ratio;
      canvas.height = oldHeight * ratio;

      canvas.style.width = `${oldWidth}px`;
      canvas.style.height = `${oldHeight}px`;
      ctx.scale(ratio, ratio);
    }
  },
复制代码

用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?

经研究发现是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页字会非常小,所以苹果就把iPhone 4的960640分辨率在网页里只显示了480320,这样devicePixelRatio＝2;现在android比较乱,有1.5/2/3等,想让图片在手机里显示更为清晰必须使用2x的背景图来代替img标签(一般情况都是用2倍),例如一个div的宽高是100100,背景图必须得200200,然后background-size:contain;,这样显示出来的图片就比较清晰了;代码如下:

   background:url(../images/icon/all.png) no-repeat center center;
   -webkit-background-size:50px 50px;
   background-size: 50px 50px;
   display:inline-block; 
   width:100%; 
   height:50px;
复制代码

启动或禁用自动识别页面中的电话号码;

<meta name="format-detection" content="telephone=no"> 
复制代码

默认情况下设备会自动识别任何可能是电话号码的字符串,设置telephone=no可以禁用这项功能,设置不识别邮箱和地址也同理

h5网站input设置为type=number的问题

h5网页input的type设置为number一般会产生三个问题:

问题1:maxlength属性不好用

<input type="number" oninput="checkTextLength(this ,10)">
<script type="text/javascript">
    function checkTextLength(obj, length) {
        if(obj.value.length > length)  {
            obj.value = obj.value.substr(0, length);
        }
    }
</script>
复制代码

问题2:form提交的时候默认取整

<input type="number" step="0.01" /> //input中type=number一般会自动生成一个上下箭头,点击上箭头默认增加一个step,点击下箭头默认会减少一个step;number中默认step是1,也就是step=0.01可以允许输入2位小数,并且点击上下箭头分别增加0.01和减少0.01;step和min一起使用时数值必须在min和max之间
复制代码

问题3:部分安卓手机出现样式问题

去除input默认样式的方法:

input,textarea {
    border: 0;
    -webkit-appearance: none; //可同时屏蔽输入框怪异的内阴影,解决iOS下无法修改按钮样式,测试还发现,加了此属性后,iOS下默认还是有圆角的,不过可以用border-radius属性修改
}
复制代码

select下拉选择设置问题

问题1:右对齐实现

设置如下属性

select option {
    direction: rtl;
}
复制代码

问题2:禁用select默认箭头

::-ms-expand修改表单控件下拉箭头,设置隐藏并使用背景图片来修饰

select::-ms-expand { display:none; }
复制代码

移动端HTML5 audio autoplay失效问题

由于自动播放网页中的音频或视频会给用户带来困扰或不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用JS的触发播放,必须由用户来触发才播放;解决方法思路:先通过用户touchstart触碰触发播放并暂停(让音频开始加载),后面用JS再操作就没问题了;解决代码:

document.addEventListener('touchstart', function () {
    document.getElementsByTagName('audio')[0].play();
    document.getElementsByTagName('audio')[0].pause();
});
复制代码

CSS动画页面闪白,动画卡顿,图片错乱的问题

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

2.开启硬件加速

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
复制代码

浮动子元素撑开父元素盒子高度(BFC)

解决方法如下：

1.父元素设置为 overflow: hidden;

2.父元素设置为 display: inline-block;等

这里两种方法都是通过设置css属性将浮动元素的父元素变成BFC(块级格式化上下文)元素,使子元素高度可以撑开父元素;不过最好使用方法1,因为inline-block元素本身会自带一些宽高度撑开其本身

往返缓存问题

点击浏览器的回退有时候不会自动执行js,特别是在mobilesafari中;这与往返缓存(bfcache)有关系,解决方法:

window.onunload = function(){};
复制代码

定位的坑

在IOS下fixed定位在软键盘顶起时会失效，所以我们在开发时统一使用absolute代替

audio元素和video元素在ios和andriod中播放问题

<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio> //音频,写法一
<audio controls="controls"> //音频,写法二   
    <source src="music/bg.ogg" type="audio/ogg"></source>
    <source src="music/bg.mp3" type="audio/mpeg"></source> //优先播放音乐bg.ogg,不支持在播放bg.mp3    
</audio>
复制代码

到这里一般都可以播放音乐了,如果还不行很有可能是微信的限制

问题3:微信的限制

如果是微信的限制,这时需要调用微信接口,页面先引入:

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
复制代码

然后JS写入微信事件:

document.addEventListener("WeixinJSBridgeReady", function() {
    document.getElementById('music').play();
}, false);
复制代码

小结:

1.audio元素的autoplay属性在IOS及Android上无法使用,在PC端正常

2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间

问题4:Safari浏览器自动播放

document.addEventListener('touchstart', function(){   
    audio.play();
}, false);
复制代码

ios系统不支持动画暂停样式(animation-play-state)

H5页面一般都会有BGM,也会提供一个旋转的音乐图标供用户开启关闭音乐;我们希望当用户点击音乐按钮时图标停止旋转,再点图标顺着之前停止的位置继续跑动画;animation-play-state是最简便的方式,然而ios不支持

目前的解决方案是:音乐图标负责跑动画,图标父级元素负责记录停止时的转动值

ios防止长按页面元素被选中

解决:加入样式可禁止用户进行复制,ios和一般的安卓都可以解决

-webkit-touch-callout:none;  //系统默认菜单被禁用;可以实现页面因为长按弹出各种操作窗口
-webkit-user-select:none; //webkit浏览器  
-khtml-user-select:none; //早期浏览器 
-moz-user-select:none; //火狐 
-ms-user-select:none; //IE10 
user-select:none; 
复制代码

添加完这段代码后在IOS上会有问题,这时发现input框无法正在输入内容了;造成这个原因是-webkit-user-select:none;这个属性,解决方法就是在css文件中同时设置一下input的属性,如下:

input {      
     -webkit-user-select:auto; //webkit浏览器    
}
复制代码

html5碰到上下拉动滚动条时卡顿/慢怎么解决

首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。

解决方案是： 1.让html和body固定100%（或者100vh）， 2.然后再在内部放一个height:100%的div，设置overflow-y: auto;和-webkit-overflow-scrolling: touch;

overflow-x:auto在iOS有兼容问题，解决方法:

.scroll-box {
  /* 模态框之类的div不能放在这个容器中,否则关闭模态框有时候关闭不了 */
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
复制代码

点击元素产生背景或边框怎么去掉

a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用,就是输入法不再能够输入多个字符 } 或 a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0); }

浏览器后退不刷新

这种情况是以前遇到的,这里也说下;主要会发生在webview里多一点,当点击后退时页面以缓存形式出现,而不是刷新后的,很多情况下这不是你预期的效果,解决方法是用js:

方法1：
window.addEventListener('pageshow', () => {
  if (e.persisted || (window.performance && 
    window.performance.navigation.type == 2)) {
    location.reload()
  }
}, false);

方法2:
window.history.replaceState(null, '', window.location.href + '?timestamp=' + new Date().getTime());

复制代码

onpageshow每次页面加载都会触发,无论是从缓存中加载还是正常加载,这是他和onload的区别;persisted判断页面是否从缓存中读出

页面通过历史记录和前进后退访问时。type值为2

transition清除闪屏

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

解决active伪类失效

<body ontouchstart></body>
复制代码

顶部状态栏背景色

apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行;语法:
<meta name="apple-mobile-web-app-capable" content="yes"> //content设置为yesWeb应用会以全屏模式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
复制代码

说明:除非你先使用apple-mobile-web-app-capable指定全屏模式,否则这个meta标签不会起任何作用;如果content设置为default,则状态栏正常显示;如果设置为blank,则状态栏会有一个黑色的背景;如果设置为blank-translucent,则状态栏显示为黑色半透明;如果设置为default或blank,则页面显示在状态栏的下方,即状态栏占据上方部分;页面占据下方部分，二者没有遮挡对方或被遮挡;如果设置为blank-translucent,则页面会充满屏幕,其中页面顶部会被状态栏遮盖住(会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px);默认值是default。

ios专区

Safari 3D变换会忽略z-index的层级

在Safari浏览器下(此Safari浏览器包括iOS的Safari，iPhone上的微信浏览器，以及Mac OS X系统的Safari浏览器)，当我们使用3D transform变换的时候，如果祖先元素没有overflow:hidden/scroll/auto等限制，则会直接忽略自身和其他元素的z-index层叠顺序设置，而直接使用真实世界的3D视角进行渲染。 例如下面的场景，图中红框里面的模块，使用 3D transform变换，进行旋转动画，但是在Safari浏览器下，忽略了二维码遮罩层的z-index,结果使用了真实世界的3D视角进行渲染。出现了重叠的bug：

解决方法：

父级，任意父级，非body级别，设置overflow:hidden可恢复和其他浏览器一样的渲染。 以毒攻毒。有时候，页面复杂，我们不能给父级设置overflow:hidden，那么可以将被影响的元素设置一个足够大的translateZ值就可以，如translateZ(100px)。

ios input输入时白屏

这个问题貌似只有再ios9中才有

解决方法：在input的父元素上添加相对定位就行了，非常神奇

IOS中对input键盘事件keyup/keydown/keypress等支持不好的问题

经查发现,IOS的输入法(不管是第三方还是自带)能检测到英文或数字的keyup,但检测不到中文的keyup,在输入中文后需要点回退键才开始搜索;解决办法是用html5的oninput事件去代替keyup,通过如下代码达到类似keyup的效果;

1.修改了input:checkbox或input:radio元素的选择中状态,checked属性发生变化

2.修改了input:text或textarea元素的值,value属性发生变化

3.修改了select元素的选中项,selectedIndex属性发生变化 统一使用input监听

<input type="text" id="testInput">
<script type="text/javascript">
    document.getElementById('testInput').addEventListener('input', function(e){
        var value = e.target.value; //e.target指向事件执行时鼠标所点击区域的那个元素;初学者会认为当前事件所绑定的元素就是鼠标所点击的那个元素,这时就要看看时间绑定的元素内部有没有子元素,如果有e.target指向这个子元素,如果没有e.target和this都指向事件所绑定的元素
    });
</script>
复制代码

IOS键盘字母输入,默认首字母大写的解决方案

设置如下属性

<input autocapitalize="off" autocorrect="off" />
复制代码

//input的三个属性autocomplete:默认为on,代表是否让浏览器自动记录输入的值,可以在input中加入autocomplete="off"来关闭记录,保密输入内容;autocapitalize:自动大小写;autocorrect:纠错

关于iOS与OS X端字体的优化(横竖屏会出现字体加粗不一致等)问题

iOS浏览器横屏时会重置字体大小,设置text-size-adjust为none可以解决iOS上的问题,但桌面版Safari的字体缩放功能会失效,因此最佳方案是将text-size-adjust为100%

-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
复制代码

某些情况下非可点击元素如(label,span)监听click事件,ios下不会触发

针对此种情况只需对不触发click事件的元素添加一行css代码即可

cursor: pointer;
复制代码

ios对时间date()的支持不一样

var date =new Date("2019/10/21"); 
复制代码

调试发现2019/10/21等同2019-10-21 00:00:00,也就是说ios默认就是从0开始计算的,我们不需要设置后面的时分秒为00:00:00

iOS(safari)标签绑定点击事件无效

iOS(safari)有时候某个标签绑定点击事件无效,加上空的οnclick=""就好了,如:<a onclick=""></a>

ios中location.href跳转页面空白

在location.href外套一层setTimeout就解决了！

setTimeout(() => {
       window.location.href = 'www.juejin.im'
}, 0);
复制代码

键盘弹起下落时的bug解决方法

点击查看

作者：Loadings
链接：https://juejin.cn/post/6844903976257896455

<img src="https://hnxx.oss-cn-shanghai.aliyuncs.com/official/1704935867433.jpg?t=0.38949819689533216" style="margin: auto" />

最后

如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。

如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。 相对于我们平时看的碎片化内容，这份笔记的知识点更系统化，更容易理解和记忆，是严格按照知识体系编排的。

一、架构师筑基必备技能

1、深入理解Java泛型 2、注解深入浅出 3、并发编程 4、数据传输与序列化 5、Java虚拟机原理 6、高效IO ……

二、Android百大框架源码解析

1.Retrofit 2.0源码解析 2.Okhttp3源码解析 3.ButterKnife源码解析 4.MPAndroidChart 源码解析 5.Glide源码解析 6.Leakcanary 源码解析 7.Universal-lmage-Loader源码解析 8.EventBus 3.0源码解析 9.zxing源码分析 10.Picasso源码解析 11.LottieAndroid使用详解及源码解析 12.Fresco 源码分析——图片加载流程

三、Android性能优化实战解析

• 腾讯Bugly:对字符串匹配算法的一点理解

• 爱奇艺：安卓APP崩溃捕获方案——xCrash

• 字节跳动：深入理解Gradle框架之一：Plugin, Extension, buildSrc

• 百度APP技术：Android H5首屏优化实践

• 支付宝客户端架构解析：Android 客户端启动速度优化之「垃圾回收」

• 携程：从智行 Android 项目看组件化架构实践

• 网易新闻构建优化：如何让你的构建速度“势如闪电”？

• …

四、高级kotlin强化实战

1、Kotlin入门教程 2、Kotlin 实战避坑指南 3、项目实战《Kotlin Jetpack 实战》

• 从一个膜拜大神的 Demo 开始

• Kotlin 写 Gradle 脚本是一种什么体验？

• Kotlin 编程的三重境界

• Kotlin 高阶函数

• Kotlin 泛型

• Kotlin 扩展

• Kotlin 委托

• 协程“不为人知”的调试技巧

• 图解协程：suspend

五、Android高级UI开源框架进阶解密

1.SmartRefreshLayout的使用 2.Android之PullToRefresh控件源码解析 3.Android-PullToRefresh下拉刷新库基本用法 4.LoadSir-高效易用的加载反馈页管理框架 5.Android通用LoadingView加载框架详解 6.MPAndroidChart实现LineChart（折线图） 7.hellocharts-android使用指南 8.SmartTable使用指南 9.开源项目android-uitableview介绍 10.ExcelPanel 使用指南 11.Android开源项目SlidingMenu深切解析 12.MaterialDrawer使用指南

六、NDK模块开发

1、NDK 模块开发 2、JNI 模块 3、Native 开发工具 4、Linux 编程 5、底层图片处理 6、音视频开发 7、机器学习

七、Flutter技术进阶

1、Flutter跨平台开发概述 2、Windows中Flutter开发环境搭建 3、编写你的第一个Flutter APP 4、Flutter开发环境搭建和调试 5、Dart语法篇之基础语法(一) 6、Dart语法篇之集合的使用与源码解析(二) 7、Dart语法篇之集合操作符函数与源码分析(三) …

八、微信小程序开发

1、小程序概述及入门 2、小程序UI开发 3、API操作 4、购物商场项目实战……

全套视频资料：

一、面试合集 二、源码解析合集

三、开源框架合集

欢迎大家一键三连支持，若需要文中资料，直接点击文末CSDN官方认证微信卡片免费领取【保证100%免费】↓↓↓

<img src="https://hnxx.oss-cn-shanghai.aliyuncs.com/official/1704935867433.jpg?t=0.38949819689533216" style="margin: auto" />