移动端WEB开发常见问题小结

移动端WEB开发

本文主要收集一些移动web开发中常见的问题和解决办法,在日常的工作中遇到新的问题会不定时更新到文章中。帮助前端开发者避免在开发中遇到的坑。

1、屏蔽阴影:

  1. -webkit-appearance:none

可以同时屏蔽输入框怪异的内阴影,解决iOS下无法修改按钮样式,测试还发现一个小问题就是,加了上面的属性后,iOS下默认还是带有圆角的,不过可以使用 border-radius属性修改。

2、Meta标签:

  1. <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
  2. <meta content="telephone=no" name="format-detection" />
  3. <meta content="email=no" name="format-detection" />

这个想必大家都知道,当页面在手机上显示时,增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览。后两个属性分别对ios上自动识别电话和android上自动识别邮箱做了限制。

3、获取滚动条的值:

  1. window.scrollY  window.scrollX

桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的,但在iOS中你会发现这两个属性是未定义的,为什么呢?因为在iOS中没有滚动条的概念,在Android中通过这两个属性可以正常获取到滚动条的值,那么在iOS中我们该如何获取滚动条的值呢?就是上面两个属性,但是事实证明android也支持这属性,所以索性都用woindow.scroll.

4、禁止选择文本:

  1. -webkit-user-select:none

禁止用户选择文本,ios和android都支持。

5、css之border-box:

  1. element{
  2.         width: 100%;
  3.         padding-left10px;
  4.         box-sizing:border-box;
  5.         -webkit-box-sizing:border-box;
  6.         border1px solid blue;
  7. }

我想要一个元素100%显示,又必须有一个固定的padding-left/padding-right,还有1px的边框,怎么办?这样编写代码必然导致出现横向滚动条,肿么办?要相信问题就是用来解决的。这时候伟大的css3为我们提供了box-sizing属性,对于这个属性的具体解释不做赘述(想深入了解的同学可以到w3school查看,要知道自己动手会更容易记忆)。

6、css3多文本换行:

  1. p {
  2.     overflow : hidden;
  3.     text-overflow: ellipsis;
  4.     display: -webkit-box;
  5.     -webkit-line-clamp: 2;
  6.     -webkit-box-orient: vertical;
  7. }

Webkit支持一个名为-webkit-line-clamp的属性,参见链接,也就是说这个属性并不是标准的一部分,可能是Webkit内部使用的,或者被弃用的属性。需要注意的是display需要设置成box,-webkit-line-clamp表示需要显示几行。

7、Retina屏幕高清图片:

  1. selector {
  2.   background-imageurl(no-image-set.png);
  3.   background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center;
  4. }

image-set的语法,类似于不同的文本,图像也会显示成不同的:

  • 不支持image-set:在不支持image-set的浏览器下,他会支持background-image图像,也就是说不支持image-set的浏览器下,他们解析background-image中的背景图像;
  • 支持image-set:如果你的浏览器支持image-sete,而且是普通显屏下,此时浏览器会选择image-set中的@1x背景图像;
  • Retina屏幕下的image-set:如果你的浏览器支持image-set,而且是在Retina屏幕下,此时浏览器会选择image-set中的@2x背景图像。

8、html5重力感应事件:

  1. if (window.DeviceMotionEvent) {
  2.          window.addEventListener('devicemotion',deviceMotionHandler, false);
  3. }
  4. var speed = 30;//speed
  5. var x = y = z = lastX = lastY = lastZ = 0;
  6. function deviceMotionHandler(eventData) {
  7.   var acceleration =event.accelerationIncludingGravity;
  8.         x = acceleration.x;
  9.         y = acceleration.y;
  10.         z = acceleration.z;
  11.         if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {
  12.             //简单的摇一摇触发代码
  13.             alert(1);
  14.         }
  15.         lastX = x;
  16.         lastY = y;
  17.         lastZ = z;
  18. }

关于deviceMotionEvent是HTML5新增的事件,用来检测手机重力感应效果具体可参考http://w3c.github.io/deviceorientation/spec-source-orientation.html

9、移动端touch事件:

  • touchstart //当手指接触屏幕时触发
  • touchmove //当已经接触屏幕的手指开始移动后触发
  • touchend //当手指离开屏幕时触发
  • touchcancel//当某种touch事件非正常结束时触发

这4个事件的触发顺序为: touchstart -> touchmove -> touchend ->touchcancel 对于某些android系统touch的bug: 比如手指在屏幕由上向下拖动页面时,理论上是会触发 一个 touchstart ,很多次 touchmove ,和最终的 touchend ,可是在android 4.0上,touchmove只被触发一次,触发时间和touchstart 差不多,而touchend直接没有被触发。这是一个非常严重的bug,在google Issue已有不少人提出 ,这个很蛋疼的bug是在模拟下拉刷新是遇到的尤其当touchmove的dom节点数量变多时比出现,当时解决办法就是用settimeout来稀释touchmove。

10、单击延迟:

click 事件因为要等待双击确认,会有 300ms 的延迟,体验并不是很好。 开发者大多数会使用封装的 tap 事件来代替click 事件,所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。 Creating Fast Buttons for Mobile Web ApplicationsEliminate 300ms delay on click events in mobile Safari

你想把广告放到这里吗?

发表评论

您必须 登录 才能发表留言!