TAT.tennylv 移动web问题小结
In CSS3,HTML5,Web开发,经验心得 on 2015年06月14日 by view: 21,164
28

Meta标签:

这个想必大家都知道,当页面在手机上显示时,增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览。

这两个属性分别对ios上自动识别电话和android上自动识别邮箱做了限制。

 

 获取滚动条的值:

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

 

禁止选择文本:

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

 

屏蔽阴影:

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

 

 css之border-box:

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

 

 css3多文本换行:

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

 

 Retina屏幕高清图片:

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

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

 

 

 html5重力感应事件:

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

 

移动端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。

 

单击延迟:

click 事件因为要等待双击确认,会有 300ms 的延迟,体验并不是很好。

开发者大多数会使用封装的 tap 事件来代替click 事件,所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。

Creating Fast Buttons for Mobile Web Applications

Eliminate 300ms delay on click events in mobile Safari

 

IOS里面fixed的文本框焦点居中

在ios里面,当一个文本框的样式为fixed时候,如果这个文本框获得焦点,它的位置就会乱掉,由于ios里面做了自适应居中,这个fixed的文本框会跑到页面中间。类似:

 

解决办法有两个:

可以在文本框获得焦点的时候将fixed改为absolute,失去焦点时在改回fixed,但是这样会让屏幕有上下滑动的体验不太好。

 

还有一种就是用一个假的fixed的文本框放在页面顶部,一个absolute的文本框隐藏在页面顶部,当fixed的文本框获得焦点时候将其隐藏,然后显示absolute的文本框,当失去焦点时,在把absolute的文本框隐藏,fixed的文本框显示。

 

最后一种就是顶部的input不参与滚动,只让其下面滚动。

 

position:sticky

position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置。

浏览器兼容性

由于这是一个全新的属性,以至于到现在都没有一个规范,W3C也刚刚开始讨论它,而现在只有webkit nightly版本和chrome 开发版(Chrome 23.0.1247.0+ Canary)才开始支持它。

另外需要注意的是,如果同时定义了left和right值,那么left生效,right会无效,同样,同时定义了top和bottom,top赢~~

移动端点透事件

简单的说,由于在移动端我们经常会使用tap(touchstart)事件来替换掉click事件,那么就会有一种场景是:

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

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

原因:

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

解决办法:

1 尽量都使用touch事件来替换click事件。

2 阻止a链接的click的preventDefault

 

base64编码图片替换url图片

u在移动端,网络请求是很珍贵的资源,尤其在2g或者3g网络下,所以能不发请求的资源都尽量不要发,对于一些小图片icon之类的,可以将图片用base64编码,来减少网络请求。

 

手机拍照和上传图片

<input type="file">的accept 属性

 

动画效果时开启硬件加速

我们在制作动画效果时经常会想要改版元素的top或者left来让元素动起来,在pc端还好但是移动端就会有较大的卡顿感,这么我们需要使用css3的  transform: translate3d;来替换,

此效果可以让浏览器开启gpu加速,渲染更流畅,但是笔着实验时在ios上体验良好,但在一些低端android机型可能会出现意想不到的效果。

 

快速回弹滚动

在iOS上如果你想让一个元素拥有像 Native 的滚动效果,你可以这样做:

经笔着测试,此效果在不同的ios系统表现不一致,

对于局部滚动,ios8以上,不加此效果,滚动的超级慢,ios8一下,不加此效果,滚动还算比较流畅

对于body滚动,ios8以上,不加此效果同样拥有弹性滚动效果。

 

持续更新中。。

ios和android局部滚动时隐藏原生滚动条

android

ios

使用一个稍微高一些div包裹住这个有滚动条的div然后设置overflow:hidden挡住之

设置placeholder时候 focus时候文字没有隐藏

移动端不同的input对应不同的键盘展示样式

ios —- android

type email

type url

type tel

type search

 

background-image和image的加载区别

在网页加载的过程中,以css背景图存在的图片background-image会等到结构加载完成(网页的内容全部显示以后)才开始加载,而html中的标签img是网页结构(内容)的一部分会在加载结构的过程中加载,换句话讲,网页会先加载标签img的内容,再加载背景图片background-image,如果你用引入了一个很大的图片,那么在这个图片下载完成之前,img后的内容都不会显示。而如果用css来引入同样的图片,网页结构和内容加载完成之后,才开始加载背景图片,不会影响你浏览网页内容。

未完待续

参考资料:http://www.nihaoshijie.com.cn/index.php/archives/455

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2015/06/yi-dong-web-wen-ti-xiao-jie/

  1. wubai 2017 年 7 月 8 日

    加*号 会反应迟钝

  2. 李白 2017 年 3 月 29 日

    有多少是空心www.kxhtml.com这样的众包网站:价格标准100元/页面,专属项目经理管这管那质量,不小心点了退款钱到了,靠谱技工为个好评就差做牛做马了,要不去看看?www.kxhtml.com

  3. mylg 2017 年 3 月 17 日

    mozilla/5.0 (linux; android 6.0; dig-al00 build/huaweidig-al00; wv) applewebkit/537.36 (khtml, like gecko) version/4.0 chrome/55.0.2883.91 mobile safari/537.36有没有遇到过在这个webview下面,rem解析不正常的情况吗

  4. 手机端Web开发中遇到的那些问题 - 李刚博客 2016 年 9 月 24 日

    […] 移动web问题小结 无线Web开发经验谈 […]

  5. 手机端Web开发中遇到的那些问题 – IT知库 2016 年 9 月 24 日

    […] 移动web问题小结 […]

  6. Ryn_xiao 2016 年 3 月 28 日

    谢谢分享,很好很强大,收藏先

  7. 冷柔 2015 年 12 月 15 日

    呵呵,非常感谢,很好很强大

  8. 冷柔 2015 年 12 月 15 日

    [不]

  9. biaotwo 2015 年 12 月 11 日

    好东西,不错加油

  10. 随你走下去 2015 年 10 月 12 日

    挺齐全的

  11. 专注互联网开发 2015 年 9 月 28 日

    收集的蛮全的

  12. LoveSnow 2015 年 7 月 4 日

    监听form的提交事件.

  13. Andy 2015 年 6 月 26 日

    支持image-set:如果你的浏览器支持image-sete,而且是普通显屏下,此时浏览器会选择image-set中的@1x背景图像; 这句里有一个小失误,image-set 而不是 image-sete哦~~

  14. Web前端之家 2015 年 6 月 24 日

    收藏了,不错

  15. 大神 2015 年 6 月 18 日

    但是笔着实验时在ios上体验良好

    笔者

    iPhone5s 、ios8+ 偶遇字体大小设置无效

    加上这个就解决了

    -webkit-text-size-adjust:none;

    • TAT.tennylv

      TAT.tennylv 2015 年 6 月 18 日

  16. swing 2015 年 6 月 17 日

    position:sticky
    这个属性现在应该已经不能用了,手机端想实现滚动到指定位置再fixed,效果应该都不好,都会有迟疑,我们解决了很久没搞定

    • TAT.tennylv

      TAT.tennylv 2015 年 6 月 18 日

      兄弟 这个属性在ios上是可以用的 我们现在就在用 在android上用不了 我们采用的方式是监听滚动事件来动态设置postion

  17. Kelvin 2015 年 6 月 15 日

    1. translate3d 对 z-index 会有影响.
    2. 安卓4.4以上的 webview ,也就是 App 内置浏览器不支持 input[type=file] 这个 google grounp 里很多issue.
    3. 内存较低的安卓机 input[type=file] 会闪退.
    4. 上面文章作者笔误
    这4个事件的触发顺序为:
    touchstart -> touchmove -> touchmove ->touchend
    貌似没写 touchcancel
    5. -webkit-user-select:none 如果设置给文本框, 会导致 ios 出现键盘,但是无法输入.
    6. viewport 的 width 可以直接设置宽度是640, 但是在 ios 的 webview 里,如果没有 webview 没有设置适配属性, 就会导致页面变宽出现超出的部分.

    都是以前的碰到的一些坑.

    • TAT.tennylv

      TAT.tennylv 2015 年 6 月 15 日

      1 translate3d 对 z-index 会有影响. 这个是在什么情况下有影响?机型?系统?
      2. 安卓4.4以上的 webview ,也就是 App 内置浏览器不支持 input[type=file] 这个 google grounp 里很多issue. 这个我专门找了个手机验证了一下没发现有问题。
      3. 内存较低的安卓机 input[type=file] 会闪退.这个有待测试
      4. 上面文章作者笔误 已修改

      • 草珊瑚 2015 年 6 月 19 日

        translate3d 对 z-index 会有影响是因为改变了stack context

  18. yc 2015 年 6 月 15 日

    好多错别字啊

    • TAT.tennylv

      TAT.tennylv 2015 年 6 月 15 日

      不好意思纯手敲的 我再去检查一下啊这些错别字

  19. 光军 2015 年 6 月 15 日

    “IOS里面fixed的文本框焦点居中”里的css,position写错了

    • TAT.tennylv

      TAT.tennylv 2015 年 6 月 15 日

      不好意思纯手敲的 我再去检查一下啊

  20. 梅子 2015 年 6 月 14 日

    你好!我上周也是遇到“IOS里面fixed的文本框焦点居中”的问题,当非焦点的状态时,我采用的是fixed,当焦点的时候会隐藏底部的按钮,这样的切换方法。但是遇到一个问题是点击ios的按钮“完成”时,可以解除聚焦的状态,能及时改成fixed,但是点击android的完成按钮时,是不能被识别。请问一下,有什么好方法能识别这个安卓的“完成按钮”吗?

    • TAT.tennylv

      TAT.tennylv 2015 年 6 月 15 日

      隐藏底部按钮是什么意思?可以加我qq 441403517

    • xshort 2015 年 6 月 18 日

      安卓原生可以监听键盘弹出状态,使用hybrid方式可以处理

发表评论