移动端H5的小技巧

你再说一遍_
413 阅读5分钟

因为从事的开发大多是h5，因此总结了一些自己遇到的坑还有一些被人吐槽过的坑，希望能给到大家帮助，若是有问题提欢迎大家讨论指导。

兼容问题

①背景音乐自动播放

安卓进入页面背景音乐是直接播放的，但是有些ios却不行

解决方法：可以通过添加一个WeixinJSBridgeReady监听事件（注：现在大多已经不支持背景音乐自动播放了，都是需要用户操作）

playMusic() {
   var that = this       
   document.addEventListener(
     'WeixinJSBridgeReady',
       function() {
         that.bgm()       
        },
         false
         )     
    },
    bgm() {   
       var audio = this.$refs.play        
       audio.setAttribute('src', '背景音乐链接')                  
       audio.play()    
 }

②获取时间

ios直接使用Date()方法获得到的时间再苹果系统上显示NaN，安卓手机则是正常显示

原因是 Date() 内时间格式问题

解决方法是将时间中的' -' 字符替成 '/' 字符 ,然后再对时间进行格式化展示

var endDate = new Date(this.expirationTime.replace(/\-/g, '/'))

值得注意的时候，毫秒在ios和安卓手机有相差，千万不要使用毫秒做倒计时，否则你会看到不同手机不正常（慢的慢，快快的快）的倒计时。

③软键盘坑

问题1：input输入框弹起会导致固定在底部的tab之类的往上顶，导致样式混乱

//解决键盘弹起元素被顶上去（这个导致的原因是使用了fixed定位）    
    
changeFocus() {    
    let Height = $("body").height();      
    $(window).resize(function() {        
    $("body").height(Height);     
     });    
 }, 
    但是input最好不要使用vh适配，因为键盘弹起的时候，此时的高度不是原来的高度  
    // 解决输入框弹出键盘挤压屏幕     
changeBlur() {      
    window.scroll(0, 0);    
},

问题2：ios自带的页面返回键会导致定位元素往上跳动

方法1：因为vw适配的是视图，所以在面对高度大于100%的页面，建议少用绝对定位，实在不行使用相对定位，不脱离文档流

方法2：但是由于ios的返回键占据了视图的一部分，所以可以使用获取屏幕的宽度，然后再根据设计稿的宽高比去计算出图片的高度，将高度写死

问题3：移动端h5页面设计图高度小于iPhone8等长屏手机解决方案

详细描述：在做移动端页面的时候，我们经常会遇到一些psd高度小于iPhone8手机高度的问题，这样按照设计图做出来的页面在iphone8手机上底部会出现白色的空白区域

解决办法： html与body设为高度100%，同时给body设置一个背景色

但是这里有一个小坑，如果是这样设置的background-color:rgba(226, 68, 51),在电脑浏览器上预览时是没有问题的

但是在真机上依然会出现底部白色屏，原因是因为电脑浏览器会将rgba（226，68，51）解析为rgb（226，68，51） 但是手机端不会，所以要么用rgba（226，68，51，1） 要么直接写rgb（226，68，51）

问题4：h5页面页面在iphoneX手机上底部会有留白

在meta viewport标签里加属性：viewport-fit=cover；

④弹性滚动

在苹果系统上非元素的滚动操作可能会存在卡顿，但安卓系统不会出现该情况。

通过声明overflow-scrolling:touch调用系统原生滚动事件优化弹性滚动，增加页面滚动的流畅度。

body {    
-webkit-overflow-scrolling: touch; 
}
.elem { 
overflow: auto; 
}

⑤修复点击无效

在苹果系统上有些情况下非可点击元素监听click事件可能会无效，针对该情况只需对不触发click事件的元素声明cursor:pointer就能解决。

.elem { 
cursor: pointer;
}

其他常见问题

1.禁止长按操作

不想用户长按元素呼出菜单进行点链接、打电话、发邮件、保存图片或扫描二维码等操作，声明touch-callout:none禁止用户长按操作。

不想用户复制粘贴盗文案，声明user-select:none禁止用户长按操作和选择复制。

* {    
/* pointer-events: none; */  /* 微信浏览器还需附加该属性才有效 */   
user-select: none;  /* 禁止长按选择文字 */   
-webkit-touch-callout: none; 
}

需要注意的是，user-select:none会让input和textarea无法输入文本，可以将二者排除

input,textarea {    
user-select: auto; 
}

2.禁止字体调整

旋转屏幕可能会改变字体大小，可以声明text-size-adjust:100%让字体大小保持不变。

* { 
text-size-adjust: 100%; 
}

3.禁止动画闪屏

在移动设备上添加动画，多数情况会出现闪屏，给动画元素的父元素构造一个3D环境就能让动画稳定运行了。

.elem { 
perspective: 1000; 
backface-visibility: hidden;  
transform-style: preserve-3d; 
}

4.移动端click事件有延迟300ms

// 消除 click 移动浏览器300ms延迟
import attachFastClick from 'fastclick'
attachFastClick.attach(document.body)

5.手机的回退功能会触发微信的http的get请求缓存，执行的是缓存的http请求，获取的数据是旧的数据

这个时候需要在请求的url后面加上一个随机数（当前时间）

export const getInfo = async () => {

  return await Axios.get(`/api/wxUserInfo/info?random=` + new Date())

}

6.微信对图片会有缓存的功能，所以上传到服务器的代码，并不能及时更新，可以尝试以下方法解决

  1. 清楚手机的缓存
  2. 发布服务器的图片大小压缩一下 （推荐一个压缩图片的网站tinypng.com/）
  3. 可以把服务器上的代码删除，手机点击链接出现404后，再把新的代码发布上去

7.h5是不能实现点击下载图片的，只有浏览器才可以，但是h5手机上会自带长按保存图片的功能，只要你放置一张图片就可以实现长按保存

8.微信授权登录hash模式下会出现，#后面的拼接在参数后面，这个需要后端配合解决

9.h5无法获取用户的手机号，需要跳转到小程序里面获取

10.调试

//在index.html加上这段代码就可以在手机端上查看控制台啦
<script src="https://cdn.jsdelivr.net/npm/eruda"></script> 
<script>eruda.init();</script>
avatar
文章
阅读
粉丝