手记

移动端原生H5开发心得和干货(持续更新2018-06-12)

更新日志

  1. 新增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)

  • fastclick.js



作者:daydreammoon
链接:https://www.jianshu.com/p/99930259b833

0人推荐
随时随地看视频
慕课网APP