标签类
1.Web App 建议用的样式
用于覆盖 WebView 默认的样式，使得 App 看起来更像原生的 App，——“不露出马脚”
/*
document.documentElement.style.webkitTouchCallout ='none'; //禁止弹出菜单
document.documentElement.style.webkitUserSelect = 'none';//禁止选中
*/
body{
-webkit-text-size-adjust:none; /* 字型大小是不會變的，而使用者就無法透過縮放網頁來達成放大字型 */
-webkit-appearance: none; /*可以改变按钮或者其它控件看起来类似本地的控件*/
-webkit-user-drag: none; /*-webkit-user-drag CSS 属性控制能否将元素作为一个整体拖动。*/
}
a{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*很多Android 浏览器的 a 链接有边框，这里取消它 transparent */
}
/* For WebApp */
body{
-webkit-user-select : none; /* 如果用户长按web网页的文本内容，都会出现选中的行为，提供复制文字等功能。禁止用户选中文字 for iOS */
}
a, img{
-webkit-touch-callout:none; /* 在IOS浏览器里面，假如用户长按a标签，都会出现默认的弹出菜单事件。禁止用户在新窗口打开页面、如何禁止用户保存图片＼复制图片 for iOS */
}
2.固定页面宽度
<meta name="viewport" content="width=320,user-scalable=0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
3.触控面积
请保证将每条数据都放在一个 a 标签中，并设置其 display: block;，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。
4.调用手机拨电话面板、短信面板
<a href="tel:18005555555">Call us at 1-800-555-5555</a> <a href="sms:18005555555"> <a href="sms:18005555555,18005555556"> <a href="sms:18005555555?body="> //大都不支持body参数
安卓新系统支持程度都比较高，遗憾的是 iOS 新版反而不如旧版（旧版采用另外一种写法可以既支持号码又支持内容），详见下图：
5.去除 Android 平台中对手机、邮箱地址的识别
<meta content="email=no" name="format-detection" /> <meta content="telephone=no" name="format-detection" />
6.如何禁止用户旋转设备
iOS已经禁止开发者阻止 orientationchange 事件，那 Android 呢？对不起，我没有找到任何资料说 Android 禁止开发者阻止浏览器 orientationchange 事件，但是在 Android 平台，确实也是阻止不了的。
7.如何关闭 iOS 中键盘自动大写
当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本 webkit 为 input 元素提供了 autocapitalize 属性，通过指定 autocapitalize=”off” 来关闭键盘默认首字母大写。
另，设置是否使用输入的自动更正、自动不全、英文自动首字母大写。
<meta content="email=no" name="format-detection" /> <meta content="telephone=no" name="format-detection" />
8.IE8 CSS Selector
IE8 虽然提供 CSS Selector 的 querySelector()/querySelectorAll()，但搜索不了自定义标签，不过你可以用*[attrib=value]搜索，但效率较低。
样式类
1.自适应布局模式
在编写 CSS 时，不建议把容器的宽度定死。为达到适配各种手持设备，对 ipad、itouch、ipod、iphone、android、web safarik、chrome 都能够正常的显示，你无需再次考虑设备的分辨率。
2.禁止浏览器默认行为
a, img{
/* 禁止用户在新窗口打开页面、如何禁止用户保存图片＼复制图片 for iOS */
-webkit-touch-callout:none;
}
*{
/* 禁止用户选中文字 for iOS */
-webkit-user-select : none;
/*很多Android 浏览器的 a 链接有边框，这里取消它*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
安卓手机取消长按出现“复制”按钮的话，要修改 Webview 默认行为：
webView.setOnLongClickListener(new OnLongClickListener(){
public boolean onLongClick(View v) {
return true;
}
});
3.如何解决盒子边框溢出
当你指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式 -webkit-box-sizing:border-box; 用来指定该盒子的大小包括边框的宽度。
4.解决 CSS3 无法编写高光和内发光
这个时候你不妨使用 -webkit-border-image 来定义这个按钮的样式。 见下面正确代码和效果图：
<style type="text/css">
.bbb{300px; height:40px; line-height:40px;border:1px solid #dcdcdc;box-shadow:0px 0px 10px rgba(0,0,0,0.2) inset;border-radius:10px;}
</style>
<div class="bbb">ttttttttttttttttttttt</div>
页面特效类
阻止页面整体滚动
document.body.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false);
去掉浏览器地址栏
window.setTimeout(scrollTo, 0, 0, 0);
这句代码必须放在 window.onload 里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。
iOS 中如何获取滚动条的值
桌面浏览器中想要获取滚动条的值是通过 document.scrollTop 和 document.scrollLeft 得到的，但在 iOS 中你会发现这两个属性是未定义的，为什么呢？因为在 iOS 中没有滚动条的概念，在 Android 中通过这两个属性可以正常获取到滚动条的值，那么在 iOS 中我们该如何获取滚动条的值呢？通过 window.scrollY 和 window.scrollX 我们可以得到当前窗口的 y 轴和 x 轴滚动条的值。
---------------------
原文：https://blog.csdn.net/zhangxin09/article/details/8750586