浏览器移动端html右边有一点白_web移动端常见问题解决方案

Meta标签：

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

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

获取滚动条的值：

window.scrollY window.scrollX

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

禁止选择文本：

-webkit-user-select:none

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

屏蔽阴影：

-webkit-appearance:none

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

css之border-box：

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多文本换行：

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屏幕高清图片：

selector {

background-image: url(no-image-set.png);

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

}

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背景图像。

html5重力感应事件：

if(window.DeviceMotionEvent) {

window.addEventListener('devicemotion',deviceMotionHandler, false);

}var speed = 30;//speed

var x = y = z = lastX = lastY = lastZ = 0;functiondeviceMotionHandler(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;

}

移动端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 事件封装组成。

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

position:fixed;

top:0;left:0;

}

Testfield: