HTML5应用中的常见问题

开发h5应用有一年多了,在这个过程中遇到不少坑,特写此文作一个小结,如果对您有点帮助,那就是莫大的欣慰了。这里说的h5应用就是运行在移动设备上的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

关于300ms延迟,具体请看:http://thx.github.io/mobile/300ms-click-delay/

六、消除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;
}

这个方法也就在 PC 端可以,真机上没作用

十一、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 会失效。

发表评论

电子邮件地址不会被公开。 必填项已用*标注