作为一名前端er,从事SmartPhone开发已经快一年,走了不少弯路,也馋到了不少甜头,特别在2010年人们还没怎么关注Web App的时候,我们已经开始研发一款HTML5游戏,中间的曲折,使得我有必要把自己总结的一些想法分享出来,如果你准备接触Web App的开发或者想要开发HTML5项目,那么准备一部SmartPhone是必须的。当然touch也可以,如果这些也没有,没关系,总是有办法。好吧,啰嗦的话不扯那么多了,先就把我的一些儿技术分享给大家:
1.准备一部SmartPhone,哦,如果没有也没关系,我们可爱的苹果浏览器已经内置了 iPhone的webkit内核的浏览器,以及touch和ipad内核浏览器。不过个人还是强烈建个配置一台touch。
配置 Viewport
0.25
)5.0
)viewport还有width属性 一般情况下 我们可以将width设置为320 或者480 或者使用默认的device-width
我们通过修改meta来设置Safari;
<meta name="viewport" content="width=320"/>
<meta name="viewport" content="width=480"/>
<meta name="viewport" content="width=480; initial-scale=1.0;minimum-scale=1.0;Maximum-scale=1.0; user-scalable=no;"/> <!-- 设置宽度为480 初始缩放比例1.0 最小缩放比例1.0 最大缩放比例1.0 禁止用户手动缩-->
当用户点击”收藏”按钮,里面有一个”添加至主屏幕”,类似于我们在PC上所见到的”添加快捷方式”,用户可以直接点击”快捷方式图标”,就可以访问web网页,很是方便.在iPhone上,有两种方法设计自定义的图标,将其在主屏幕显示:
第一种是使用iPhone上自定义头像:在最新的IOS版本上新增加了一些视觉效果,以便与其内置图标相同。
具体来说,新增加:
例如: 这个是我的头像,如何在iPhone上与其内置图标显示相同呢?
需要添加在网页上的代码:
< link rel = "apple-touch-icon" href = "http://www.iundefined.com/wp-content/uploads/2011/11/apple-touch-icon-precomposed.png" /> |
第二种使用自定义的头像,这里不使用iPhone内置的一些的特效,需要自定义显示的效果
例如:这是没有任何修饰的头像,,如何在iPhone上没有任何修饰呢?
<link rel="apple-touch-icon-precomposed" href="http://www.iundefined.com/wp-content/uploads/2011/11/apple-touch-icon-precomposed.png"/>
如果你想你的web应用程序/网站不显示Safari浏览器的用户界面组件,添加这一行:
代码:
< meta name = "apple-mobile-web-app-capable" content = "yes" /> |
在改变safari状态栏有三种颜色可以选择,
分别是:
第一种:“默认”
代码:
< meta name = "apple-mobile-web-app-status-bar-style" content = "default" /> |
第二种:“黑色”
代码:
< meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> |
第三种:“黑色半透明”
代码:
< meta name = "apple-mobile-web-app-status-bar-style" content = "black-translucent" /> |
在iPhone 上有一个类似本机应用程序启动画面,你可以指定一个loading图像时,它可以在显示在您的Web应用程序/网站之前。默认情况下,这一loading图片是用户最后一次访问的Web应用截图页面。如果你想自定义loading图像,你需要在页面上添加一个链接图片
代码:
< link rel = "apple-touch-startup-image" href = "http://www.iundefined.com/wp-content/uploads/2011/11/loading.png" > |
在这里需要说明的是自定义的loading图片必须是PNG图片,其他JPG,GIF都是浮云,其次图片的尺寸是320*460纵向。当然还有需要注意的是将apple-mobile-web-app-capable设置为yes。
loading