如何实现web app添加到主屏幕

如果你之前通过apple-mobile-web-app-capable这个meta标签来将网页添加到主屏幕的话，这种方法只支持iPhone 的3.5〃屏幕，而iPhone 5会比较悲催，页面顶部和顶部会出现一条黑色区域。即便你提供了一个大尺寸的启动界面(640*1096)，iPhone 5依然会将其压缩至640*920。

对iOS6的解决方案：

你需要放弃之前使用的viewport属性width=device-width或者width=320。如果你不指定viewport，它也可以很正常的显示：

<meta name="viewport" content="initial-scale=1.0">

或者你也可以指定一个非320的宽度：

<meta name="viewport" content="width=320.1">

如果你不想影响iPhone 4s以前的safari，也可以用js动态设置viewport：

if (window.screen.height==568) { // iPhone 4"

document.querySelector("meta[name=viewport]").content="width=320.1"

}

对于启动画面，可以用media query来调整：

<link href="startup-568h.png" rel="apple-touch-startup-image" media="(device-height: 568px)">

<link href="startup.png" rel="apple-touch-startup-image" sizes="640x920" media="(device-height: 480px)">

使用jQuery Mobile开发Web App-页面切换动画 android

jQuery Mobile包含一组基于CSS3的过渡动画（又称转场效果），可以应用在任何页面或page组件切换。jQuery Mobile默认对页面切换和返回按钮设置了滑动（slide）效果。

要设定一个特定过渡效果，只需要在链接上添加一个data-transition属性，可以使用以下属性值：

<a data-transition="pop">I'll pop</a>

jQuery Mobile提供了6种切换动画：slide(滑动)、slideup(向上滑动)、slidedown(向下滑动)、pop(抛出)、fade(淡入淡出)和flip(3D翻转)。动画效果见这里。

注意：flip效果在大多数android浏览器上不能被正确渲染，因为缺少对3d css transform的支持。不幸的是android并没有忽略flip效果，而是使用水平翻转来替代。所以建议在android完美支持之前谨慎使用flip效果。

此外，你可以使用data-direction=”reverse”来设定反向的过渡效果，比如对slide效果（从右往左）使用data-direction=”reverse”则会变成从左往右，对pop效果（从小到大抛出）使用data-direction=”reverse”则会变成从大到小消失。

今天老总跟我们聊天，说了很多技术的东西，有很多关于线程和内存的内容，凭我现在的水平，不理解其说的内容，以后要在这方面多加注意些，注重性能优化。

在软件行业，要实时跟上软件发展的进程。老总有个比喻，是这样的。菜市场每天都有很多新鲜的菜进入，如果你抱着一捆不新鲜的菜来买，即使你人缘再好，老主顾也会离你而去，更别说其他。

---