.game {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
使游戏容器绝对定位之后，上下左右四边都与手机屏幕贴紧
在Photoshop中，如果需要看似0.5px的边框，常见的方法就是对1px边框加上阴影模糊1px。同理，我们在retina屏下需要做到真实的1px边框，可利用box-shadow属性模拟：
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
button {
border:none;
padding:0 16px;
box-shadow: inset 0 0 1px #000,
inset 0 1px 0 #75c2f8,
0 1px 1px -1px rgba(0, 0, 0, .5);
}
}
body {
font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}
iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。 需补充说明，华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5878)， 但系统会自动将华文黑体 STHeiTi 兼容命中系统默认中文字体黑体-简或黑体-繁。原生Android下中文字体与英文字体都选择默认的无衬线字体
移动端常见这种布局：
.wrapper{display: -webkit-box;} //父容器
img{不要求}
.right-wrap{display: -webkit-box;-webkit-box-orient: vertical;-webkit-box-pack: justify;} //图片右侧内容的容器
浏览器的页面在切换时，由于其页面加载机制，在跳转到下一个页面时，先要请求联网、载入页面代码、构建dom、渲染，最后才显示出来。在最终结果渲染完毕前，会出现几十毫秒甚至数秒的白屏。原生App是没有这个问题的。虽然使用SPA单页应用模型，即ajax+div切换也可以避免白屏，但把所有页面写在一个SPA页面里，页面多了手机上也跑不起来，而且工程大了代码那个乱。。。被坑过的人自然知道。
解决方案：
1、预加载，即后台预载新页面的HTML文件及资源，使用时直接调出这个已经创建好的webview
2、即点击前页的链接开始走waiting转圈，同时后台开始加载完整的新页面，加载完再用js控制显示到前台。
3、head和body分开两个webview来弄