移动网页设计问题小结
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，且不允许用户点击屏幕放大浏览。
PS：在设置了initial-scale=1 之后，我们终于可以以1:1 的比例进行页面设计了。关于viewport，还有一个很重要的概念是：iphone 的safari 浏览器完全没有滚动条，而且不是简单的”隐藏滚动条”，是根本没有这个功能。iphone 的safari 浏览器实际上从一开始就完整显示了这个网页，然后用viewport 查看其中的一部分。当你用手指拖动时，其实拖的不是页面，而是viewport。浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样
1、<meta content="telephone=no" name="format-detection" />
2、<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：
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背景图像。
监听link标签加载css：
var checkProCss = function(){
var intervalFlag;
var timeoutFlag;
var body = $('#js_bar_main');
try {
intervalFlag = setInterval(function(){
if (body.css('cursor') == 'none') {//getComputedStyle
clearInterval(intervalFlag);
clearTimeout(timeoutFlag);
}
}, 200);
timeoutFlag = setTimeout(function(){
clearInterval(intervalFlag);
clearTimeout(timeoutFlag);
Q.monitor(466101);//pro.css没有拉取成功
}, 6000);//timeout为6s
} catch(e){
clearInterval(intervalFlag);
clearTimeout(timeoutFlag);
}
};
移动端检测css是否加载完毕，由于
监听link.load
监听link.addEventListener(‘load’, loadHandler, false);
监听link.onreadystatechange
在不同机型上兼容性不同，所以可以利用轮训来检测一个dom的css样式来判断，如上代码，在css里定义了一个cursor为none，如果这个css加载失败就会返回默认的cursor为auto，如果成功就返回css里定义的none。
html5重力感应事件：
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) {
//shake
alert(1);
}
lastX = x;
lastY = y;
lastZ = z;
}
关于deviceMotionEvent是HTML5新增的事件，用来检测手机重力感应效果具体可参考
http://w3c.github.io/deviceorientation/spec-source-orientation.html
本文地址：http://www.tuquu.com/tutorial/wd2809.html
