移动端h5开发常用知识

元气小坏坏 提交于 2019-12-01 10:00:42

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;
}

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!