配置项
- 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 项
样式项
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)
fastclick.js http://www.bootcdn.cn/fastclick/
库
http://www.css88.com/doc/zeptojs_api/ - 移动端的 Jquery
http://www.swiper.com.cn/ - 轮播图
clipboard.js https://www.npmjs.com/package/clipboard-js - 复制剪贴板
qrcode.js http://code.ciaoca.com/javascript/qrcode/ - 动态生成二维码
如果您喜欢这篇文章, 那么记得动动你们的, 给个 like 或者关注我哦.
来源: http://www.jianshu.com/p/99930259b833