移动端HTML5开发的常见问题汇总与解决方法

时间:2021-11-25
类别:教程 - 网页设计

最近在开发H5,就在开发过程中发现H5存在着一些坑,所以就总结一下在开发过程中遇到的坑以及解决办法,本文会持续的更新,同时也欢迎大家一起评论分享H5开发中遇到的坑、解决办法等。

常见的通用的H5开发问题

IOS端-H5开发问题

· 输入法隐藏页面留白

问题现象:iOS端软键盘失去焦点(隐藏)后,页面不会回弹,页面下方会留下输入法块的白色块。

暴力解决方案:软键盘收起(隐藏)后,滚动一下页面,页面中的留白块块就会消失。所以只要在输入完毕后实现一下‘滚动’的操作就可以解决问题。

React(React Hook)暴力开发解决方案:(代码实现部分)

  1. // 输入键盘隐藏回弹 
  2.  
  3.   useEffect(() => { 
  4.  
  5.     document.addEventListener('focusout'function(e) { 
  6.  
  7.       let u = navigator.userAgent; 
  8.  
  9.       let isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 
  10.  
  11.       if (isiOS) { 
  12.  
  13.         window.scrollTo(0, 0); 
  14.  
  15.       } 
  16.  
  17.     }) 
  18.  
  19.   },[]) 

*注:这个ios软键盘收起留白解决方案适应性不全(只适合表单中仅有一个input输入框且为单页面),表单中拥有多个input输入框时,切换input时也会触发scrollTo方法,造成input回弹闪烁异常问题。

问题现象:  存在多个input输入框且页面可以滚动时,切换输入框产生回弹闪烁,影响用户体验;同时iOS微信中依旧存在软键盘收起留白问题。

终极解决方案:  经过调研了解到微信版本6.7.4以上会出现该问题。首先判断当前的设备以及当前微信版本号;其次当软键盘收起时,设置setTimeout方法,模拟软键盘弹起;最后获取当前滚动高度位置,软键盘收起滚动回当前滚动高度减1的位置即可。

React(React Hook)终极开发解决方案:(代码实现部分)

  1. useEffect(() => { 
  2.  
  3.     // 软键盘收起事件处理 
  4.  
  5.     const onFocusout = () => { 
  6.  
  7.       let u = navigator.userAgent; 
  8.  
  9.       let isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 
  10.  
  11.       let wechatInfo = u.match(/MicroMessenger/([d.]+)/i); // WeChat 
  12.  
  13.       let wechatVersion = wechatInfo[1]; 
  14.  
  15.       if (isiOS && wechatVersion >= '6.7.4') { 
  16.  
  17.         setTimeout(() => { 
  18.  
  19.           const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; 
  20.  
  21.           window.scrollTo(0, Math.max(scrollHeight - 1, 0)); 
  22.  
  23.         }, 100); 
  24.  
  25.       } 
  26.  
  27.     } 
  28.  
  29.     // 加载组件添加事件监听 
  30.  
  31.     document.body.addEventListener('focusout', () => { onFocusout() }); 
  32.  
  33.      
  34.  
  35.     // 卸载组件清除事件监听 
  36.  
  37.     return () => { 
  38.  
  39.       document.body.removeEventListener('focusout', () => { onFocusout() }); 
  40.  
  41.     } 
  42.  
  43.   },[]) 

长按二维码无法识别

问题现象:在ios中,部分iPhone机型(大屏幕、高分辨率等)微信中长按二维码无法识别,具体bug错误现象如下图所示。

解决方案:添加padding、给二维码添加透明的二维码识别区,增加二维码的识别面积;简化二维码周围的信息元素,增加二维码计算识别度。

React开发解决方案:(代码实现部分)

HTML部分:

  1. import obbyMD from '@/assets/images/obby-majordomo.png'
  2.  
  3. <div className="obby-QRcode"
  4.  
  5.   <div className="code-img-2"
  6.  
  7.     <img src={obbyMD} className="obbyMD-code" alt="二维码"/> 
  8.  
  9.     <img src={obbyMD} className="code"  style={{ opacity: 0 }} alt="透明二维码"/> 
  10.  
  11.   </div> 
  12.  
  13.   <div className="obby-md-text">联系小管家</div> 
  14.  
  15. </div> 

CSS公共部分:

  1. @mixin QRCode { 
  2.  
  3.   background#fdac6d
  4.  
  5.   border2px solid #f3a365
  6.  
  7.   box-shadow: inset 0 1px 10px 1px #f28a4c
  8.  
  9.   border-radius: 3.3vw; 
  10.  
  11.  
  12. CSS二维码部分: 
  13.  
  14. .obby-QRcode { 
  15.  
  16.     @include QRCode; 
  17.  
  18.     padding2.4vw; 
  19.  
  20.     margin6vw auto 3vw; 
  21.  
  22.  
  23.  
  24.     & .code-img-2 { 
  25.  
  26.       positionrelative
  27.  
  28.       display:block
  29.  
  30.       margin0 auto
  31.  
  32.       width36vw; 
  33.  
  34.       height36vw; 
  35.  
  36.  
  37.  
  38.       & .obbyMD-code { 
  39.  
  40.         positionabsolute
  41.  
  42.         displayblock
  43.  
  44.         width36vw; 
  45.  
  46.         top: 0
  47.  
  48.         left: 0
  49.  
  50.       } 
  51.  
  52.  
  53.  
  54.       & .code { 
  55.  
  56.         positionabsolute
  57.  
  58.         displayblock
  59.  
  60.         margin0 auto 0
  61.  
  62.         width36vw; 
  63.  
  64.         top: -5.1rem; 
  65.  
  66.         left: -4.426665rem; 
  67.  
  68.         opacity: 0
  69.  
  70.       } 
  71.  
  72.     } 
  73.  
  74.  
  75.  
  76.     .obby-md-text { 
  77.  
  78.       display: flex; 
  79.  
  80.       justify-contentcenter
  81.  
  82.       align-items: center
  83.  
  84.  
  85.  
  86.       width36vw; 
  87.  
  88.       margin-top2vw; 
  89.  
  90.       letter-spacing0.3vw; 
  91.  
  92.       font-family: Source Han Sans CN; 
  93.  
  94.       font-weight500
  95.  
  96.       color#7D3100
  97.  
  98.     } 
  99.  
  100.   } 

Android端-H5开发问题

·video层级问题

问题现象:点击登录弹窗可以正常显示,在点击播放视频后,video层级变成了最高级,再次点击登录弹窗被video遮挡了,无论怎么给登录弹窗z-index都无法正常显示弹窗。

解决方案:Android微信内置浏览器是X5内核,X5内核中默认了video的层级是最高级别,所以改变z-index没有办法改变层级显示问题。在使用video标签时可以加上 x5-video-player-type='h5-page'的属性,这时就把H5中的video就启用了同层H5播放器,这样就可以调整video、弹窗等层级的显示。(H5同层播放器接入规范:https://x5.tencent.com/tbs/guide/video.html

React开发解决方案:(代码实现部分)

  1. <video 
  2.  
  3.   id="player" 
  4.  
  5.   controls={true} 
  6.  
  7.   width="100%" 
  8.  
  9.   height="100%" 
  10.  
  11.   x5-video-player-type="h5-page" // 启用同层H5播放器 
  12.  
  13.   x5-video-orientation="landscape|portrait" // 视频跟着手机自动旋转 
  14.  
  15.  
  16.   <source src={videoUrl} type="video/mp4" /> 
  17.  
  18. </video> 

CSS样式代码:

  1. video { 
  2.  
  3.     object-fit: fill; 
  4.  
  5.     object-positioncenter
  6.  
  7.  } 
    收藏