本文章向大家介绍移动端h5开发常用知识,主要包括移动端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