移动端开发必须知道的小技巧

前言

最近在公司写一个混合 app 项目，页面基本全部都是用 h5 完成，嵌入到原生 webview 下。发现一个问题，在 iphone 6 下 苹果手机的状态栏会挡住页面，导致页面下移，样式错乱，最后网上查找了些解决办法，加了一条 meta 标签解决了问题。今天特来总结下常用的移动端开发需要注意的meta标签及一些小技巧。

1. viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

这个是移动端页面开发必备的标签，用来调整布局视口同视觉视口一致，禁止页面缩放等。

1. apple-mobile-web-app-capable

apple-mobile-web-app-capable 是设置 web 应用是否以全屏模式运行。

语法：

<meta name="apple-mobile-web-app-capable" content="yes">

说明：

如果 content 设置为yes，web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。如果选择全屏模式运行，则会删除默认的苹果工具栏和菜单栏。

我开篇遇到的问题就是通过设置该 meta 标签解决的。

1. 设置顶部状态栏的颜色

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

说明：

这个标签起作用的前提是 必须事先开启了全屏模式运行 webapp，即 第二条的 meta 标签必须同步指定，否则这个标签不起作用。

如果content设置为default，则状态栏正常显示。如果设置为blank，则状态栏会有一个黑色的背景。如果设置为blank-translucent，则状态栏显示为黑色半透明。如果设置为default或blank，则页面显示在状态栏的下方，即状态栏占据上方部分，页面占据下方部分，二者没有遮挡对方或被遮挡。如果设置为blank-translucent，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的retina屏幕为40px）。默认值是default。

1. webapp添加到主屏后的标题（ios 6 新增）

<meta name="apple-mobile-web-app-title" content="title">

1. 设置缓存

<meta http-equiv="cache-control" content="no-cache" />

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

1. format-detection

format-detection 启动或禁用自动识别页面中的电话号码。

语法：

<meta name="format-detection" content="telephone=no">

说明：

默认情况下，设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。

1. html5调用安卓或者ios的拨号功能

html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。

拨打手机直接如下:

<a href="tel:[phone]">点击拨打15677776767</a>

ps：如果遇到这种情况失效，可以在页面头部 添加 上一条meta 标签，content 设置为 yes。

1. iphone及ipad下输入框默认出现内阴影。

element{
  -webkit-appearance: none; 
}

1. 移动端滑动页面绝对定位元素出现抖动

这个问题自己网上找了一些解决办法，仅供参考。

• 给body设置高度100%

body,html{
    widht:100%;
    height:100%;
}

如果是项目中已经做好的页面，有其他特效，直接设置这个属性，可能对页面的其他功能造成影响。

如果使用此法，本地调试效果不好，建议不要使用。

• 给固定定位的元素添加transform属性

transform:translatez(0);
或者
transform:translate3d(0,0,0);

• 外层嵌套一个盒子

多加一层盒子，外层fixed固定定位，内层的设置绝对定位absolute；

<div style='position: fixed;'>
  <div style='position: absolute'>
    ...
  </div>
</div>

1. iphone下 input 框光标过长

input 输入框在 iphone 下 光标过长，android显示正常。

方法：

调低 input 标签的 line-height 样式值。

1. ios 下 页面滑动卡顿，不流畅

在内容出现滚动的元素上设置一条css样式，实现惯性滚动和弹性效果。

{
  -webkit-overflow-scrolling: touch;
}

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果，它有两个值：

auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。

touch:
使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

1. 页面顶部固定定位元素或底部固定定位元素遮挡页面部分内容。

方法一：

给最外层的div加上 padding-bottom， 值为 固定定位元素高度；

方法二：

利用伪元素，给最外层div添加伪元素 after，设置高度为 固定定位元素高度。

.wrapper::after{
  content: '';
  height: '固定定位元素高度';
}

1. 禁止复制、选中文本

element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}

1. ios中input键盘事件keyup、keydown、keypress支持不是很好

用input search做模糊搜索的时候，在键盘里面输入关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进行关键词标红。用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中变红很慢，用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才能相应！

解决办法：

可以用html5的oninput事件去代替keyup

<input type="text" id="test">
<script type="text/javascript">
  document.getelementbyid('test').addeventlistener('input', function(e){
      var value = e.target.value
      ....
  })
</script>

然后就达到类似keyup的效果！

1. webview 下部分 javascript 代码没有执行，比如 alert()等。

解决办法：

webview只是一个承载体、各种内容的渲染需要使用webviewchromclient去实现、所以set一个默认的基类webchromeclient就行。

ps：这部分需要原生开发协助设置一个 基类 webchromeclient，代码:

webview.setwebchromeclient()

1. 移动端点击300ms延迟

300ms 尚可接受，不过因为300ms产生的问题，我们必须要解决。300ms导致用户体验并不是很好，解决这个问题，我们一般在移动端用 tap 事件来取代click 事件。

推荐两个 js，一个是 fastclick，一个是 tap.js。

关于移动端点击延迟处理方案，详细叙述请看：移动端点击延迟处理方案

1. 移动端点击穿透问题

案例如下：

<div id="haorooms">点透事件测试</div>
<a href="http://www.baidu.com">百度</a>

div是绝对定位的蒙层, 并且z-index高于a。而a标签是页面中的一个链接，我们给div绑定tap事件：

$('#haorooms').on('tap',function(){
  $('#haorooms').hide()
})

我们点击蒙层时 div正常消失，但是当我们在a标签上点击蒙层时，发现a链接被触发，这就是所谓的点透事件。

原因：

touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏， 此时 click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接上。

解决办法：

1. 尽量都使用 touch 事件来替换click事件。例如用touchend事件(推荐)。

2. 用 fastclick，详情看上面 github 仓库。

3. 用preventdefault阻止a标签的click。

4. 延迟一定的时间(300ms+)来处理事件 （不推荐）。

5. 以上一般都能解决，实在不行就换成click事件。

下面介绍一下touchend事件，如下：

$("#haorooms").on("touchend", function (event) {
   event.preventdefault()
 
 })

1. ios中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格

可以通过正则去掉

this.value = this.value.replace(/\u2006/g, '')

1. 解决 ios 中 video 标签视频自动全屏播放问题

给 video 标签添加 属性：

<!-- 针对 ios8，9下生效  -->
<video webkit-playsinline="webkit-playsinline"></video>

<!-- ios10 及以上 -->

<video playsinline="playsinline"></video>

ps: 如果是内嵌入 webview 下 还需要原生开发的伙伴添加以下支持代码：

webview.allowsinlinemediaplayback = yes;

1. 移动端点击链接发送邮件

<a href="mailto:[e-mail]?subject=testobject">[e-mail]</a>

点击后直接给 [e-mail] 发邮件，主题为：testobject 。

ps: 如果遇到这种情况失效，可以在页面头部 添加 一条meta 标签，content 设置为 yes。

<meta name="format-detection" content="email=yes">

1. 移动端滚动穿透

描述：

　在打开的弹窗或者遮罩层上滚动， 会影响到下层的body元素的滚动。 体验很不好。

解决办法：

一般思路是在打开弹框或遮罩层的时候，获取html的scrolltop， 给body改为fixed定位， top值为负的scrolltop值。 关闭弹框的时候，把fixed定位去掉。还原scrolltop值。

1. 移动端布局方式

这个基本是我们做移动开发首先需要确定的一个方案，我总结为一句话：

经典的 rem 布局与新秀 vw 布局

当然还有常见的比如 弹性盒子（flex） 都可以。

不过需要说的是，淘宝 flexible.js 布局的作者已经推荐我们选用 vw 布局。

这部分大家可以自己网上查阅相关资料，我这里就不多做累述了。

后语

本人平时写的一些前端知识点都会放在自己的 github 仓库下，欢迎大伙轻喷，哈哈。