移动端web开发整理

/* 移动端定义字体的代码 */

body {

　　font-family: "Helvetica Neue", Helvetica;

}

ios端触摸时，会出现一个半透明灰色遮罩

　　如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0

body{-webkit-tap-highlight-color: rgba(0,0,0,0);}

关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)

　　iOS 浏览器横屏时会重置字体大小

body{

　　-webkit-text-size-adjust: 100%;

　　text-size-adjust: 100%;

}

禁止 iOS 弹出各种操作窗口

-webkit-touch-callout:none;

禁止用户选中文字

-webkit-user-select:none;

上下拉动滚动条时卡顿、慢

div {

　　-webkit-overflow-scrolling: touch;

　　overflow-scrolling: touch;

}

IOS设备输入框默认内阴影

input {

　　-webkit-appearance: none;

}

// 阻止页面滑动的默认行为

document.body.addEventListener('touchmove', function(event) {

　　if (event.cancelable) {

　　// 判断默认行为是否已经被禁用

　　　　(!event.defaultPrevented) && event.preventDefault();

　　}

});

移动端的touchstart, touchmove, touchend三个事件，拖动元素结束时，获取到了touchend事件， 但是event.touches[0].target所指向的元素却是touchstart时获取到的元素，而并非手指所移动到上方的元素，所以在处理获取移动到哪个元素上方之类的需求时，普通方法已不奏效，解决方式如下：

var element = document.elementFromPoint(event.originalEvent.pageX, event.originalEvent.pageY);

这样获取到的即为所需元素。