移动端原生H5开发心得和干货

更新日志

修改HTML项 5
新增配置项 7

配置项

1. Viewport

不设置的话，相当于用手机访问PC端页面一样，无初始缩放和页面宽度

2. Apple设备使用Web App模式（一般用于SPA应用，因为如果在里面点击还是跳转其他链接的话，还是会从Safari打开的）

在Safari浏览器点击分享按钮-添加到主屏幕，然后在桌面打开

3. 强制浏览器全屏(UC/QQ)

就是浏览器全屏，隐藏浏览器上下的状态栏

4. 忽略

某些浏览器识别成功之后会将号码或者邮箱转换成a标签

5. Windows Phone点击无阴影

类似于css的-webkit-tap-highlight: transparent

6. 清除浏览器缓存

手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache

7. 为手持设备定制特殊样式

HTML项

1. 调用系统功能


打电话给: 10086

发短信给: 10086

发邮件给：[email protected]

2. 取消Input在Apple设备中，英文首字母默认大写

3. :active伪类失效

4. 唤醒App

打开微信

让Android或者Ios开发者提供一个App协议给你就可以了，让人尴尬的是，我们不知道用户到底有没有安装此App应用，所以需要Javascript来配合，当用户已安装直接跳转到App，没有安装跳到下载地址，详情在本文中的Javascript项

5. 软键盘弹出数字键盘(用户只能输入数字)

样式项

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


  我是内容

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

css

.item .left {
  width: 50rem;
}

flex布局，以前用float+margin

21. 按钮点击的样式

.btn:active {
  opacity: .7
}

22. Scroll-X

html

* n

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

打开微信

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

库

zepto-移动端的Jquery
swiper-轮播图
clipboard.js-复制剪贴板
qrcode.js-动态生成二维码

最后

本文到此结束，希望以上内容对你有些许帮助，如若喜欢请记得点个赞跟关注哦

image

微信公众号 「前端宇宙情报局」，将不定时更新最新、实用的前端技巧/技术性文章，欢迎关注，一起学习

移动端原生H5开发心得和干货

更新日志

配置项

1. Viewport

2. Apple设备使用Web App模式（一般用于SPA应用，因为如果在里面点击还是跳转其他链接的话，还是会从Safari打开的）

3. 强制浏览器全屏(UC/QQ)

4. 忽略

5. Windows Phone点击无阴影

6. 清除浏览器缓存

7. 为手持设备定制特殊样式

HTML项

1. 调用系统功能

2. 取消Input在Apple设备中，英文首字母默认大写

3. :active伪类失效

4. 唤醒App

5. 软键盘弹出数字键盘(用户只能输入数字)

样式项

1. 去除某些区域点击的时候会出现阴影

2. 禁止用户长按选中、复制文本

3. 禁止用户长按出现菜单栏

4. 流畅滚动（一般用于overflow: scroll之后出现滚动不流畅的情况）

5. 改变输入框placeholder的颜色值

6. 修改表单元素的默认样式

7. 多行文本超出显示省略号

8. css3启用硬件加速

9. 解决transition闪屏

10. 旋转屏幕时字体大小不改变

11. 某些Android机圆角失效

12. select下拉选择设置右对齐

13. 部分机型input的type为search时，自带close按钮的样式修改方案

14. 使用rem单位

15. 自定义滚动条样式

16. Android上去掉语音输入按钮

17. 监听屏幕旋转事件并且处理样式

18. Flexbox兼容写法

19. 高度Auto如何全屏居中

20. 左边固定宽度，右边自适应

21. 按钮点击的样式

22. Scroll-X

Javascript项

1. 唤醒App，唤醒失败则跳转到下载地址

2. 浏览器滚动到底部，加载数据

3. 获取设备类型

4. 监听页面可见性变化

5. Apple设备zepto/jquery事件委托bug

6. 禁止页面滚动

7. 监听屏幕旋转事件

8. 重力感应

9. 事件穿透

库

最后

你可能感兴趣的:(移动端原生H5开发心得和干货)