.game {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
使游戏容器绝对定位之后,上下左右四边都与手机屏幕贴紧
http://isux.tencent.com/html5-game-development-cheats.html
在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);
}
}
http://isux.tencent.com/responsive-web-design.html
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下中文字体与英文字体都选择默认的无衬线字体
http://alloyteam.github.io/Spirit/modules/Standard/index.html
移动端常见这种布局:
.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来弄
http://ask.dcloud.net.cn/article/25