博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iOS为网站添加图标到主屏幕以及增加启动画面
阅读量:7106 次
发布时间:2019-06-28

本文共 2390 字,大约阅读时间需要 7 分钟。

hot3.png

现今移动设备越来越多,苹果为iOS设备配备了apple-touch-icon私有属性,添加该属性,在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上,方便用户以后访问。实现方法是在HTML文档的<head>标签加入下面代码即可。

如果不想系统对图标添加效果,可以用apple-touch-icon-precomposed代替apple-touch-icon,这时我们提供的图标就要自己做圆角和高亮效果了。

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="icon-57.png">  

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon-72.png">  

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icon-114.png">  

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="icon-144.png">  

添加启动画面

<link rel="apple-touch-startup-image" sizes="2048x1496" href="icon-2048x1496.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="1536x2008" href="icon-1536x2008.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="1024x748" href="icon-1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">  

<link rel="apple-touch-startup-image" sizes="768x1004" href="icon-768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">  

<link rel="apple-touch-startup-image" sizes="640x920" href="icon-640x920.png" media="screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)">  

<link rel="apple-touch-startup-image" sizes="320x460" href="icon-320x460.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">  

转载于:https://my.oschina.net/u/232595/blog/644585

你可能感兴趣的文章
【原】oracle11G AWR使用及分析
查看>>
<20190104>关掉一些鸡肋的Win10功能
查看>>
iOS网络篇4-利用NSURLConnection实现GET/POST/HEAD请求
查看>>
linux 环境下 eas console的运行
查看>>
Rainbows! 4.4.3 发布,修复 EventMachine 问题
查看>>
USACO翻译:USACO 2012 JAN三题(2)
查看>>
Java学习之IO流总结
查看>>
LightOJ 1038 Race to 1 Again
查看>>
php set_magic_quotes_runtime() 函数过时解决方法
查看>>
使用IDEA创建java项目(hello word)
查看>>
TCP/IP协议栈---网络基础篇(3)
查看>>
What the f*ck JavaScript?
查看>>
Round Numbers(组合数学)
查看>>
用户登录体验之密码框设计
查看>>
Variational Inference for Crowdsourcing
查看>>
列表、字典、集合表达式
查看>>
Kubernetes Ingress管理
查看>>
click无响应
查看>>
410·邮件合并图片
查看>>
【SpringBoot】SpringBoot最精简的设置
查看>>