HTML5 应用中的常见问题

开发 HTML5 应用有一年多了，在这个过程中遇到不少坑，特写此文作一个小结，如果对您有点帮助，那就是莫大的欣慰了。这里说的 HTML5 应用就是运行在移动设备上的 Web App，由于移动设备屏幕大小不一，安装的浏览器也不统一，处理器内存也不一样，直接会造成各种兼容及性能问题。

一、overflow: hidden 导致滑条不显示

父容器使用了 overflow: hidden，在子容器上加 overflow: auto。可滑动，但滑条不显示。

可以添加以下 CSS 伪类：

 .content::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0);
  border-left: 1px solid rgba(0, 0, 0, 0);
}

.content::-webkit-scrollbar {
  width: 5px;
  height: 13px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  min-height: 28px;
}

.content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

也就是用 CSS 自定义一个滑条，在 Webkit 内核液晶浏览器下是起作用的。

二、ios 端滑动不流畅的问题

现在很多 for Mobile 的 HTML5 网页内都有快速滚动和回弹的效果，看上去和原生 app 的效率差不多。

要实现这个效果很简单，只需要加一行 css 代码即可：

-webkit-overflow-scrolling : touch

Safari 用了原生控件来实现，对于有 -webkit-overflow-scrolling 的网页，会创建一个 UIScrollView，提供子 layer 给渲染模块使用。Safari 5.0 及 Android 4.0 以上支持该属性。

三、禁止复制、选中文本

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

四、Retina 屏的 1px 边框

因为 css 中的 1px 并不等于移动设备的 1px，这些由于不同的手机有不同的像素密度。在 window 对象中有一个 devicePixelRatio 属性，它可以反应 css 中的像素与设备的像素比。

把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border，并设置 transform 的 scaleo 为 0.5，缩小一半，原先的元素相对定位，新做的 border 绝对定位。

css 代码如下：

{
.scale-1px{
  position: relative;
  border:none;
}
.scale-1px:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

五、移动端点击 300ms 延迟

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

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

六、消除 IE10 里面的那个叉号

input:-ms-clear{display:none;}

七、JS 判断设备来源

// 判断移动端设备
function deviceType() {
  var ua = navigator.userAgent;
  var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
  for (var i = 0; i < len, len = agent.length; i++) {
    if (ua.indexOf(agent[i]) > 0) {
      break;
    }
  }
}
deviceType();
window.addEventListener('resize', function() {
  deviceType();
})

// 判断微信浏览器
function isWeixin() {
  var ua = navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == 'micromessenger') {
    return true;
  } else {
    return false;
  }
}

八、audio 元素和 video 元素在 ios 和 andriod 中无法自动播放

原因：因为各大浏览器都为了节省流量，做出了优化，在用户没有行为动作时（交互）不予许自动播放；

<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>
// 音频，写法二
<audio controls="controls"> 
  <source src="music/bg.ogg" type="audio/ogg"></source>
  <source src="music/bg.mp3" type="audio/mpeg"></source>
  优先播放音乐 bg.ogg，不支持在播放 bg.mp3
</audio>
// JS 绑定自动播放（操作 window 时，播放音乐）
$(window).one('touchstart', function(){
  music.play();
})
// 微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {
  music.play();
}, false);

小结

audio 元素的 autoplay 属性在 IOS 及 Android 上无法使用，在 PC 端正常；
audio 元素没有设置 controls 时，在 IOS 及 Android 会占据空间大小，而在 PC 端 Chrome 是不会占据任何空间；
注意不要遗漏微信的兼容处理需要引用微信 JS。

九、实现多行文本溢出显示 ...

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

注意：-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的 WebKit 属性。常见结合属性：

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示；
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

十、改变 placeholder 的字体颜色大小

input::-webkit-input-placeholder { 
  /* WebKit browsers */ 
  font-size:14px;
  color: #333;
} 
input::-moz-placeholder { 
  /* Mozilla Firefox 19+ */ 
  font-size:14px;
  color: #333;
} 
input:-ms-input-placeholder { 
  /* Internet Explorer 10+ */ 
  font-size:14px;
  color: #333;
}

十一、meta 标签

<!-- 设置缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 可隐藏地址栏，仅针对 IOS 的 Safari（注：IOS7.0 版本以后，safari 上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 仅针对 IOS 的 Safari 顶端状态条的样式（可选 default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS 中禁用将数字识别为电话号码 / 忽略 Android 平台中对邮箱地址的识别 -->
<meta name="format-detection"content="telephone=no, email=no" />
<!-- 启用 360 浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免 IE 使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别 viewport 的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc 强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ 强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC 强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ 强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC 应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ 应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

十二、android 4.x bug

三星 Galaxy S4 中自带浏览器不支持 border-radius 缩写；
同时设置 border-radius 和背景色的时候，背景色会溢出到圆角以外部分；
部分手机(如三星)，a 链接支持鼠标 :visited 事件，也就是说链接访问后文字变为紫色；
android 无法同时播放多音频 audio；
oppo 的 border-radius 会失效。