制作一个简单的Native App-利用“添加到主屏幕”
来源:互联网 发布:加索尔10年总决赛数据 编辑:程序博客网 时间:2024/06/02 06:16
iOS中,可以利用Safari的添加到主屏幕来将自己喜爱的网址添加到主屏幕中,所以,利用这个特征,再加上Html5等,完全可以制作一个简单的Native App。
大家可以使用Safari访问HELLO,将其添加到主屏幕以观察效果。添加图标:
<link rel=”apple-touch-icon-precomposed” sizes=”57×57″ href=”icon-57.png”><link rel=”apple-touch-icon-precomposed” sizes=”72×72″ href=”icon-72.png”><link rel=”apple-touch-icon-precomposed” sizes=”114×114″ href=”icon-114.png”><link rel=”apple-touch-icon-precomposed” sizes=”144×144″ href=”icon-144.png”>添加图标到屏幕里的有两种属性值apple-touch-icon和apple-touch-icon-precomposed,区别就在于是否会应用iOS中自动给图标添加的那层高光。
由于iPhone以及iPad都有两种分辨率的设备存在,图标的尺寸就需要做4个:144×144(iPad Retina)、72×72(iPad)、114×114(iPhone Retina)、57×57(iPhone)。
可以使用sizes尺寸来告诉设备该调用哪个图标。
添加启动画面:
<link rel=”apple-touch-startup-image” sizes=”2048×1496″ href=”icon-2048×1496.png” media=”screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)”><link rel=”apple-touch-startup-image” sizes=”1536×2008″ href=”icon-1536×2008.png” media=”screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)”><link rel=”apple-touch-startup-image” sizes=”1024×748″ href=”icon-1024×748.png” media=”screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)”><link rel=”apple-touch-startup-image” sizes=”768×1004″ href=”icon-768×1004.png” media=”screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)”><link rel=”apple-touch-startup-image” sizes=”640×920″ href=”icon-640×920.png” media=”screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)”><link rel=”apple-touch-startup-image” sizes=”320×460″ href=”icon-320×460.png” media=”screen and (max-device-width: 320)”>
apple-touch-startup-image是用来标示启动画面的,但它不像apple-touch-icon可以指定sizes来告诉设备该使 用哪个图片(也有一种说法是在iOS5中已经支持sizes识别了,但没有测试成功),所以只能通过media里的设备分辨率的判断值来识别,而 iPhone Retina的分辨率值界于取值之间,所以需要通过webkit的私有属性-webkit-min-device-pixel-ratio:2来鉴别像素 密度以进行识别。
启动画面的图片尺寸并非完全等于设备的尺寸,比如iPad2的尺寸是1024×768,但它的启动画面尺寸横向是1024×748,竖向尺寸是 768×1004,因为需要减去系统状栏的高度20px,而使用的Retina屏幕的iPhone4以及iPad3则需要减去状态栏的高度40px。
去掉Safari的一些默认控件:
<meta name=”apple-mobile-web-app-capable” content=”yes”><meta name=”apple-mobile-web-app-status-bar-style” content=”black”><meta name=”format-detection” content=”telephone=no”><meta name=”viewport” content=”width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no”>这样,一个简单的Native App就制作完成了。
0 0
- 制作一个简单的Native App-利用“添加到主屏幕”
- React Native简单的APP
- android如何制作出一个简单的聊天app
- 如何用Swift制作一个简单的画板APP
- QuickPart应用(1)-----利用QuickPart制作一个简单的webpart
- 利用Blend制作一个简单的用户控件外观
- 32.利用UIViewAnimation动画制作一个简单的下拉菜单
- 利用c++ list类制作一个简单的文本编辑器
- 利用tensorflow制作一个简单的聊天机器人
- 如何利用Construct 2制作一个简单的游戏
- 利用Java制作一个简单的QQ登录界面
- [教程] React Native基础实战(1)—— 制作一个简单的按钮
- 从0到1写一个react native的app(上)
- 实现类似百度地图-添加到主屏幕的功能
- 如何简单的添加CGPoint对象到一个NSArray
- 利用AppIntro快速制作一个app启动页
- 和其他App分享简单的数据(3)添加一个简单的分享Action
- 制作一个能copy到Applications目录的mac版本的eclipse.app
- easyui layout 标配,破解不正常显示
- AES加密(兼容php,java,objective-c)
- S5700的ACL访问控制列表及实验
- 不用分布式方式,处理大量数据的问题(2)
- iOS Quartz笔记
- 制作一个简单的Native App-利用“添加到主屏幕”
- iOS UIView分类调整控件坐标
- 利用Android属性动画实现Banner控件
- 类的派生与继承
- imx6 平台 mrval sd8797 蓝牙移值
- 编程珠玑 第一部分 基础
- 围住神经猫源码(慕课)
- MAC电脑忘记密码
- iOS 调用js方法,去除HTML标签