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;}

七、移动端 HTML5 audio autoplay失效问题

由于自动播放网页中的音频或视频,会给用户带来一些困扰或者不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用JS的触发播放,必须由用户来触发才可以播放。

解决方法思路:先通过用户touchstar 触碰,触发播放并暂停(音频开始加载,后面用JS再操作就没问题了。

解决代码:

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

发表评论

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