移动端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'; 
          } 
        } 
      }); 
    } 
} 

总结

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

（编辑：河北网）

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