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

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)有时候某个标签绑定点击事件无效,加上空的onclick=""就好了,如:

ios中location.href跳转页面空白

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

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

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

在App.vue的created钩子里统一处理即可

created() { 
    this.handleFocusOut(); 
    this.handleResize(); 
}, 
methods:{ 
    handleFocusOut() { 
      // input 焦点失焦后，ios 键盘收起，但没有触发 window resize，导致实际页面dom仍然被键盘顶上去--错位 
      document.addEventListener('focusout', () => { 
        document.body.scrollTop = 0; 
      }); 
    }, 
    // 监听resize事件（键盘弹起触发），然后将 input textarea 元素滑动到可视区域，并将特定元素隐藏 
    handleResize() { 
      const clientHeight = document.documentElement.clientHeight; 
      window.addEventListener('resize', () => { 
        // 判断当前 active 的元素是否为 input 或 textarea 
        if ( 
          document.activeElement.tagName === 'INPUT' || 
          document.activeElement.tagName === 'TEXTAREA' 
        ) { 
          setTimeout(() => { 
            // 原生方法，滚动至需要显示的位置 
            document.activeElement.scrollIntoView(); 
          }, 0); 
        } 
 
        // 解决键盘弹起后 fixed 定位元素被顶起问题 
        const bodyHeight = document.documentElement.clientHeight; 
        const ele = document.getElementById('fixed-bottom'); 
        if (ele) { 
          if (clientHeight > bodyHeight) { 
            ele.style.display = 'none'; 
          } else { 
            ele.style.display = 'block'; 
          } 
        } 
      }); 
    } 
} 

总结

路漫漫其修远兮,在兼容的道路上渐行渐远

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!