h5技巧

小结

  • z-index设为负数时，在ios上可能会被默认为0的body元素遮挡
  • 禁止QQ浏览器的默认下拉事件，和手动缩放页面功能
    document.addEventListener('touchmove',
(evt) => {
 if (evt.cancelable) {// 判断默认行为是否可以被禁用
     if (!evt.defaultPrevented) {// 判断默认行为是否已经被禁用
         evt.preventDefault();// 禁用默认行为
     }
 }
}
, false);
  • QQ浏览器调用键盘时会触发window.onresize事件，其他浏览器不会
  • QQ内置浏览器不能自动执行window.open()事件
  • 移动端输入框

手机端横屏

原文

const screen = () => {
    const width = document.documentElement.clientWidth;
    const height = document.documentElement.clientHeight;
    const doc = document.getElementsByClassName("watch")[0];
    if(width>height){
        doc.style.width = width + "px";
        doc.style.height = height + "px";
        doc.style.top = '0px';
        doc.style.left = '0px';
        doc.style.transform = 'rotate(0)';
    }else{
        doc.style.width = height + "px";
        doc.style.height = width + "px";
        doc.style.top = (height - width) / 2 + 'px';
        doc.style.left = 0 - (height - width) / 2 + 'px';
        doc.style.transform = 'rotate(90deg)';
    }
}

screen();
window.onresize=screen

扩展：竖屏显示横屏内容

if(width>height){
    doc.style.transform = `scale(1,1)`;
    doc.style.top = '0px';
    doc.style.left = '0px';
    doc.style.width = "100%";
    doc.style.height = "100%";
}else{
    doc.style.width = height / width * width + "px";
    doc.style.height = width / height * height + "px";
    doc.style.transform = `scale(${width / height},${width / height})`;
    doc.style.top = (width - height) / 2 * (width / height) + 'px';
    doc.style.left = (width - height) / 2 + 'px';
}

微信QQ授权

results matching ""

    No results matching ""