【转载】移动web问题小结

Meta标签：

1	< meta content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name = "viewport" / >

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

1 2	< meta content = "telephone=no" name = "format-detection" / > < meta content = "email=no" name = "format-detection" / >

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

 

 获取滚动条的值：

1	window . scrollY   window . scrollX

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

 

禁止选择文本：

1	- webkit - user - select : none

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

 

屏蔽阴影：

1	- webkit - appearance : none

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

 

 css之border-box：

1 2 3 4 5 6 7

element {          width : 100 % ;          padding - left : 10px ;          box - sizing : border - box ;          - webkit - box - sizing : border - box ;          border : 1px solid blue ; }

那我想要一个元素100%显示，又必须有一个固定的padding-left／padding-right，还有1px的边框，怎么办？这样编写代码必然致使出现横向滚动条，肿么办？要相信问题就是用来解决的。这时候伟大的css3为咱们提供了box-sizing属性，对于这个属性的具体解释不作赘述（想深刻了解的同窗能够到w3school查看，要知道本身动手会更容易记忆）。让咱们看看如何解决上面的问题：

 

 css3多文本换行：

1 2 3 4 5 6 7

p {      overflow : hidden ;      text - overflow : ellipsis ;      display : - webkit - box ;      - webkit - line - clamp : 2 ;      - webkit - box - orient : vertical ; }

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

 

 Retina屏幕高清图片：

1 2 3 4

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

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重力感应事件：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

if ( window . DeviceMotionEvent ) {                  window . addEventListener ( 'devicemotion' , deviceMotionHandler , false ) ;             }          var speed = 30 ; //speed          var x = y = z = lastX = lastY = lastZ = 0 ;          function deviceMotionHandler ( eventData ) {               var acceleration = event . accelerationIncludingGravity ;                  x = acceleration . x ;                  y = acceleration . y ;                  z = acceleration . z ;                  if ( Math . abs ( x - lastX ) > speed || Math . abs ( y - lastY ) > speed || Math . abs ( z - lastZ ) > speed ) {                      //简单的摇一摇触发代码                      alert ( 1 ) ;                  }                  lastX = x ;                  lastY = y ;                  lastZ = z ;          }

关于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的文本框焦点居中

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

< ! DOCTYPE html >      < head >      input {        position : fixed ;        top : 0 ; left : 0 ;      }      < / head >      < body >          < div class = "header" >              < form action = "" >                  < label > Testfield : < input type = "text" / > < / label >              < / form >          < / div >      < / body > < / html >

在ios里面，当一个文本框的样式为fixed时候，若是这个文本框得到焦点，它的位置就会乱掉，因为ios里面作了自适应居中，这个fixed的文本框会跑到页面中间。相似：

 

解决办法有两个：

能够在文本框得到焦点的时候将fixed改成absolute，失去焦点时在改回fixed，可是这样会让屏幕有上下滑动的体验不太好。

1 2 3 4 5 6 7 8 9 10

. fixfixed { position : absolute ; } $ ( document )      . on ( 'focus' , 'input' , function ( e ) {          $ this . addClass ( 'fixfixed' ) ;      } )      . on ( 'blur' , 'input' , function ( e ) {          $ this . removeClass ( 'fixfixed' ) ;      } ) ;

 

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

1 2 3 4 5 6 7 8 9 10 11 12

. fixfixed { position : absolute ; } $ ( document )      . on ( 'focus' , 'input' , function ( e ) {          $ absolute . . show ( ) ;          $ this . hide ( ) ;      } )      . on ( 'blur' , 'input' , function ( e ) {          $ fixed . . show ( ) ;          $ this . hide ( ) ;      } ) ;

 

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

 

position:sticky

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

1 2 3 4 5

. sticky { position : - webkit - sticky ; position : sticky ; top : 15px ; }

浏览器兼容性：

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

另外须要注意的是，若是同时定义了left和right值，那么left生效，right会无效，一样，同时定义了top和bottom，top赢～～

移动端点透事件

简单的说，因为在移动端咱们常常会使用tap(touchstart)事件来替换掉click事件，那么就会有一种场景是：

1 2 3

< div id = "mengceng" > < / div >   < a href = "www.qq.com" > www . qq . com < / a >

div是绝对定位的蒙层z-index高于a，而a标签是页面中的一个连接，咱们给div绑定tap事件：

1 2 3

$ ( '#mengceng' ) . on ( 'tap' , function ( ) { $ ( '#mengceng' ) . hide ( ) ; } ) ;

咱们点击蒙层时 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 属性

1 2 3 4

< ! -- 选择照片 -- > < input type = file accept = "image/*" > < ! -- 选择视频 -- > < input type = file accept = "video/*" >

 

动画效果时开启硬件加速

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

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

 

快速回弹滚动

在iOS上若是你想让一个元素拥有像 Native 的滚动效果，你能够这样作：

1 2 3 4

. div {          overflow : auto ;          - webkit - overflow - scrolling : touch ;      }

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

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

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

 

持续更新中。。

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

android

1 2 3

:: - webkit - scrollbar {      opacity : 0 ; }

ios

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14

. wrap {      height : 100px ;      overflow : hidden ; } . box {      width : 100 % ;      height : - webkit - calc ( 100 % + 5px ) ;      overflow - x : auto ;      overflow - y : hidden ;      - webkit - overflow - scrolling : touch ; } < div class = "wrap" >      < div class = "box" > < / div > < / div >

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

1 2 3

input : focus :: - webkit - input - placeholder {      opacity : 0 ; }

移动端不一样的input对应不一样的键盘展现样式

ios —- android

type email

type url

type tel

type search

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