移动端原生H5开发心得和干货（持续更新2018-06-12）
更新日志
新增HTML项5.
配置项
1. Viewport
<!-- 让页面宽度等于设备宽度，缩放比例为1，禁止用户缩放网页 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><!-- 针对一些不识别viewport的浏览器，如黑莓 --><meta name="HandheldFriendly" content="true"><!-- 针对微软的老式浏览器 --><meta name="MobileOptimized" content="320">
不设置的话，相当于用手机访问PC端页面一样，无初始缩放和页面宽度
2. Apple设备使用Web App模式（一般用于SPA应用，因为如果在里面点击还是跳转其他链接的话，还是会从Safari打开的）
<!-- 设置Web应用是否以全屏模式运行 --><meta name="apple-mobile-web-app-capable" content="yes"><!-- 设置状态栏（屏幕顶部栏）的样式，default为白色，black为黑色，black-translucent为透明 --><meta name="apple-mobile-web-app-status-bar-style" content="default"><!-- 设置添加到主屏幕后的图标 --><link rel="apple-touch-icon" href="xxx.png"><!-- 设置启动动画，避免加载时出现白屏 --><link rel="apple-touch-startup-image" href="xxx.png"><!-- 设置添加到主屏幕后的标题 --><meta name="apple-mobile-web-app-title" content="标题">
在Safari浏览器点击分享按钮-添加到主屏幕，然后在桌面打开
3. 强制浏览器全屏(UC/QQ)
<!-- UC强制竖屏 --><meta name="screen-orientation" content="portrait"><!-- UC强制全屏 --> <meta name="full-screen" content="yes"><!-- UC应用模式 --> <meta name="browsermode" content="application"><!-- QQ强制竖屏 --><meta name="x5-orientation" content="portrait"><!-- QQ强制全屏 --><meta name="x5-fullscreen" content="true"><!-- QQ应用模式 --><meta name="x5-page-mode" content="app">
就是浏览器全屏，隐藏浏览器上下的状态栏
4. 忽略
<!-- 忽略网页自动识别数字为电话号码 --><meta name="format-detection" content="telephone=no"><!-- 忽略网页自动识别邮箱账号 --><meta name="format-detection" content="email=no">
某些浏览器识别成功之后会将号码或者邮箱转换成a标签
5. Windows Phone点击无阴影
<meta name="msapplication-tap-highlight" content="no">
类似于css的-webkit-tap-highlight: transparent
6. 清除浏览器缓存
<meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">
手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache
HTML项
1. 调用系统功能
<!-- 拨号 --><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>
2. 取消Input在Apple设备中，英文首字母默认大写
<input autocapitalize="off" autocorrect="off">
3. :active伪类失效
<!-- 注册一个空的touchstart事件 --><body ontouchstart=""></body>
4. 唤醒App
<a href="weixin://">打开微信</a>
让Android或者Ios开发者提供一个App协议给你就可以了，让人尴尬的是，我们不知道用户到底有没有安装此App应用，所以需要Javascript来配合，当用户已安装直接跳转到App，没有安装跳到下载地址，详情在本文中的Javascript项
5. 软键盘弹出数字键盘(用户只能输入数字)
<input type="number" pattern="[0-9]*">
样式项
1. 去除某些区域点击的时候会出现阴影
a, button, input, img, select, textarea { -webkit-tap-highlight-color: transparent
}2. 禁止用户长按选中、复制文本
.text { user-select: none; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none
}3. 禁止用户长按出现菜单栏
a, img { -webkit-touch-callout: none
}4. 流畅滚动（一般用于overflow: scroll之后出现滚动不流畅的情况）
.scroll { -webkit-overflow-scrolling: touch
}5. 改变输入框placeholder的颜色值
::-webkit-input-placeholder { /* WebKit browsers */ color: #999; }:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; }::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; }:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; }input:focus::-webkit-input-placeholder{ color:#999; }6. 修改表单元素的默认样式
input, button, select, textarea { border: none; outline: none; appearance: none; -webkit-appearance: none; -moz-appearance: none
}checkbox也可以写成switch组件，点击查看switch组件
7. 多行文本超出显示省略号
/* 超出n行时显示省略号 */.hide-text-n { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: n; -webkit-box-orient: vertical
}8. css3启用硬件加速
写transition、animation时，请用transform代替left、top等属性，从而使动画更流畅
.cube { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0)
}9. 解决transition闪屏
.cube { -webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000}10. 旋转屏幕时字体大小不改变
html, body, form, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%}11. 某些Android机圆角失效
.radius { background-clip: padding-box
}12. select下拉选择设置右对齐
select option { direction: rtl
}13. 部分机型input的type为search时，自带close按钮的样式修改方案
.search::-webkit-search-cancel-button { display: none
}14. 使用rem单位
:root { font-size: 10px}body { font-size: 1.4rem}
@media screen and (max-width: 320px) { :root { font-size: 8px
}
}1rem = 1 * 根元素的font-size值，因此这里的body font-size为14px，以后要修改font-size，直接修改根元素的就行啦，牵一发而动全身
15. 自定义滚动条样式
::-webkit-scrollbar /* 滚动条整体部分 */::-webkit-scrollbar-thumb /* 滚动条内的小方块 */::-webkit-scrollbar-track /* 滚动条轨道 */::-webkit-scrollbar-button /* 滚动条轨道两端按钮 */::-webkit-scrollbar-track-piece /* 滚动条中间部分，内置轨道 */::-webkit-scrollbar-corner /* 边角，两个滚动条交汇处 */::-webkit-resizer /* 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 */
::-webkit-scrollbar修改浏览器滚动条样式，div::-webkit-scrollbar修改某个节点的滚动条样式
16. Android上去掉语音输入按钮
input::-webkit-input-speech-button { display: none
}17. 监听屏幕旋转事件并且处理样式
/* 竖屏时样式 */@media all and (orientation:portrait) { body::after { content: '竖屏'
}
}/* 横屏时样式 */@media all and (orientation:landscape) { body::after { content: '横屏'
}
}18. Flexbox兼容写法
.box { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex
}.box-1 { -webkit-box-flex: 1.0; -moz-flex-grow: 1; -webkit-flex-grow: 1; flex-grow: 1}.box-column { -webkit-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column
}.box-row-center { -webkit-box-pack: center; -moz-justify-content: center; -webkit-justify-content: center; justify-content: center
}.box-column-center { -webkit-box-align: center; -moz-align-items: center; -webkit-align-items: center; align-items: center
}.box-center { -webkit-box-pack: center; -moz-justify-content: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-align-items: center; -webkit-align-items: center; align-items: center
}.box-between { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between
}.box-around { -webkit-box-pack: justify; -webkit-justify-content: space-around; -ms-flex-pack: justify; justify-content: space-around
}这里列出了几个经常使用的属性，一般情况下够用
19. 高度Auto如何全屏居中
html
<div class="dialog-wrapper box box-center"> <div class="dialog-content">我是内容</div></div>
css
.dialog-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7); z-index: 100}.dialog-content { background-color: #fff}fixed + flexbox布局，一般用于对话框
20. 左边固定宽度，右边自适应
html
<div class="item box"> <div class="left"></div> <div class="right box-1"></div></div>
css
.item .left { width: 50rem;
}flex布局，以前用float+margin
21. 按钮点击的样式
.btn:active { opacity: .7}22. Scroll-X
html
<div class="scroll-x"> <div class="scroll-item"></div> * n</div>
css
.scroll-x { display: flex; width: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; height: 55px; padding: 15px;
}.scroll-item { width: 55px; flex-shrink: 0; margin-right: 10px; background-color: blueviolet;
}
a.gif
Javascript项
1. 唤醒App，唤醒失败则跳转到下载地址
html
<a href="weixin://" class="js-open-btn">打开微信</a>
javascript
var btn = document.querySelector('.js-open-btn');
btn.addEventListener('click', openInApp, false);function openInApp () { var t = new Date();
setTimeout(function () {
setTimeout(function () { var tag = document.hidden; if (new Date() - t < 2000 && !tag) { window.location = isIphone? urlios : urlapk
}
}, 500);
}, 500)
}2. 浏览器滚动到底部，加载数据
function isBottom () { var { offset = 20, callback = null } = options ? options : {};
$(document).on('scroll', function () { var top = parseInt($(document).scrollTop());
top >= ($(document).height() - $(window).height() - offset) ? callback && callback() : false
})
}
isBottom({ callback: function () { if (!loading) { // your code
}
}
})offset为偏移量，距离底部还有多少时执行回调
3. 获取设备类型
function getUserAngent () { var ua = window.navigator.userAgent; return { isWechat: ua.toLowerCase().match(/MicroMessenger/i) == 'micromessenger', isAndriod: ua.indexOf('Android') > -1 || ua.indexOf('Linux') > -1, isIphone: ua.indexOf('iPhone') > -1 || ua.indexOf('iPad') > -1, isPc: !/Android|webOS|iPhone|iPod|BlackBerry/i.test(ua), isQQ: ua.match(/QQ\//i) == "QQ/"
}
}isQQ返回是否是手机QQ内置浏览器，而不是QQ浏览器
4. 监听页面可见性变化
方法1：
// 当前窗口得到焦点window.onfocus = function () {}// 当前窗口失去焦点window.onblur = function () {}方法2：
document.addEventListener('visibilitychange', function () { var hidden = document.hidden; if (hidden) { // 当前窗口失去焦点
} else { // 当前窗口得到焦点
}
});页面最小化、切换标签、切换应用
5. Apple设备zepto/jquery事件委托bug
$(document).on('click', '.btn', function () { console.log(this)
}).btn为div标签，不管是异步添加的还是同步添加的.div，在Iphone上都无法触发该事件，但是Android、PC却可以，上网找了一下资料，解决办法有两种：
给.btn加个css属性cursor: pointer;
换成a或者button标签;
6. 禁止页面滚动
var roller = {
handle(e) {
e.preventDefault()
},
lockRoll() { document.addEventListener("touchmove", handle, false)
},
cureRoll() { document.removeEventListener("touchmove", handle, false)
}
}一般用于弹出蒙层(mask)之后禁止，消失就恢复
7. 监听屏幕旋转事件
window.addEventListener('onorientationchange', callback, false);function callback () { let orientation = window.orientation; if(orientation == 0 || orientation == 180) { // 竖屏
} else { // 横屏
}
}8. 重力感应
window.addEventListener('deviceorientation', callback, false);function callback (e) { var data = e.accelerationIncludingGravity; console.log(data) // 这里有你想要的数据}一个不错的库http://www.jq22.com/jquery-info178
9. 事件穿透
点击穿透问题：点击蒙层(mask)上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件，解决办法:
只用touch
只用click
touch延迟350ms再隐藏蒙层(mask)
库
zepto-移动端的Jquery
swiper-轮播图
clipboard.js-复制剪贴板
qrcode.js-动态生成二维码
作者：daydreammoon
链接：https://www.jianshu.com/p/99930259b833
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦