为了账号安全,请及时绑定邮箱和手机立即绑定

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

2018.07.12 10:23 6377浏览

更新日志

  1. 修改HTML项 5
  2. 新增配置项 7

配置项

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

7. 为手持设备定制特殊样式
<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld">

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='tel'>
<input type="number" pattern="\d*">

样式项

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: 1;
  -webkit-flex: 1;
  flex: 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

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

41人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消