移动端h5开发常用知识

1. 页面滑动不流畅，一般是在盒子使用了overflow: auto || scroll后出现

body {
　　　　-webkit-overflow-scrolling: touch;
　　　　overflow-scrolling: touch;
}

2. 点击按钮或超链接之类的默认灰色背景色

-webkit-tap-highlight-color: rgba(0, 0, 0, 0)

3. 固定定位元素抖动

html,body {

　　height: 100%;

　　overflow: auto;

}

4. 隐藏scroll滚动条

::-webkit-scrollbar {

　　display: none;

}

5. 最简单的rem自适应

众所周rem是的值是根据根元素的字体大小相对计算的，而每个设备的大小不一样，所以，根元素的字体大小要动态设置：

html {
　　font-size: calc(100vw / 3.75);
}
body {
　　font-size: .14rem;
}

6. 屏幕旋转为横屏时，字体大小会变

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

7. 调用设备系统的某些功能

<!-- 拨号 -->
<a href="

tel:10086

">打电话给: 10086</a>

<!-- 发送短信 -->
<a href="

sms:10086

">发短信给: 10086</a>

<!-- 发送邮件 -->
<a href="

mailto:839626987@qq.com

">发邮件给：839626987@qq.com</a>

<!-- 选择照片或者拍摄照片 -->
<input type="

file" accept="image/*

">

<!-- 选择视频或者拍摄视频 -->
<input type="

file" accept="video/*

">

<!-- 多选 -->
<input type="

file" multiple>

8. 唤起某些app功能（许多），具体的请百度

<a href="weixin://">打开微信</a>


<a href="

alipays://">打开支付宝</a>


<a href="

alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫功能</a>

9. 禁止、忽略某些浏览器的某些默认行为

<!-- 忽略浏览器自动识别数字为电话号码 -->
<meta name="

format-detection" content="telephone=no">

<!-- 忽略浏览器自动识别邮箱账号 -->
<meta name="

format-detection" content="email=no">

// 禁止长按图片保存
img {
　　-webkit-touch-callout: none;
　　pointer-events: none; // 像微信浏览器还是无法禁止，加上这行样式即可
}

// 禁止长按选择文字
div {
　　-webkit-user-select: none;
}

// 禁止长按呼出菜单
div {
　　-webkit-touch-callout: none;
}

10. input失焦后页面不回弹的问题

一般出现在ios设备中的微信内部浏览器；

出现条件：页面高度过小，聚焦是页面向上移动；

解决办法为，在聚焦时，获取当前滚动条高度，然后失焦时，赋值之前获取的高度：

<template>
  <input type="text" @focus="focus" @blur="blur">
</template>

<script>
  export default {
    data() {
      return {
        scrollTop: 0
      }
    },
    
    methods: {
      focus() {
        this.scrollTop = document.scrollingElement.scrollTop;
      },
      
      blur() {
        document.scrollingElement.scrollTo(0, this.scrollTop);
      }
    }
  }
</script>

11. 文本溢出，段落超过两行时省略

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

12. h5移动端监听软件盘事件

1）Android端：在android中软键盘弹起或收起时，会改变window的高度，因此监听window的onresize事件；

//获取原窗口的高度
let originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
window.onresize=function(){
    //键盘弹起与隐藏都会引起窗口的高度发生变化
    let resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
    if(resizeHeight-0<originalHeight-0){
        //当软键盘弹起，在此处操作
    }else{
             //当软键盘收起，在此处操作
        }
}

2）ios focusin和focusout支持冒泡，对应focus和blur, 使用focusin和focusout的原因是focusin和focusout可以冒泡，focus和blur不会冒泡，这样就可以使用事件代理，处理多个输入框存在的情况。

document.body.addEventListener('focusin', () => {
     
    //软键盘弹出的事件处理           
    if(isIphone()）{

         }
})
  
document.body.addEventListener('focusout', () => {
 
      //软键盘收起的事件处理
    if(isIphone()）{

     }  
})

13. h5移动端双击缩放的问题

document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
        event.preventDefault();
    }
}, false);

var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
    var now = Date.now();
    if (now - lastTouchEnd <= 300) {
        event.preventDefault();
    }
    lastTouchEnd = now;
}, false);

document.addEventListener('gesturestart', function (event) {
    event.preventDefault();
});

14. h5移动端横向滚动列表

1）父元素

height:35px;

display: -webkit-box;

overflow-x: auto;

overflow-y:hidden;

-webkit-overflow-scrolling:touch;

2）子元素

height: 35px;

15. h5与安卓ios的对接

首先，判断设备类型：

//判断是否是安卓还是ios
    function isAndroid_ios() {
        var u = navigator.userAgent,
            app = navigator.appVersion;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        return isAndroid == true ? true : false;
    }

分别做处理：

安卓：

if (isAndroid_ios()) {
    window.js.btn();//安卓的方法
} else {
    location.href =`../../html/visual-map/visual-map.html?userId=${userId}&schoolId=${schoolId}&schoolName=${schoolName}`;
}

ios：

$("#tt").on("click", function() {//点击h5页面按钮
    window.webkit.messageHandlers.toSure.postMessage({
        "body": "buttonActionMessage",
        "iijdjisd": "sdwsdfsdd"
    });

})

function toPage() {//点击ios按钮
    let page= {
        "body": "12",
        "12": "12"
    }
    return page;
}

来源：https://www.cnblogs.com/qlongbg/p/11677626.html

标签

移动互联网终端

android

软键盘

webkit