iOS8 、iPhone6 及iPhone6+:Apple touch icon 与Startup Image

本文可视为《iOS / Android 移动设备中的 Touch Icons》及《iOS 7 Web App的初级优化之道》的补充文,因为iOS8 、iPhone6 及 iPhone6+ 是最近出来的新玩意,针对他们的更新或兼容也进行了差不多了。这是我google 了一阵子的成果,不讲原理的东西,直接上结果。

Apple touch icon

来自StartOverFlow 的一个针对这两款新设备的meta 代码:

<link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png"> <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">

另外一个总结大全:

<!-- For Chrome for Android: --> <link rel="icon" sizes="192x192" href="touch-icon-192x192.png"> <!-- For iPhone 6 Plus with @3× display: --> <link rel="apple-touch-icon-precomposed" sizes="180x180" href="apple-touch-icon-180x180-precomposed.png"> <!-- For iPad with @2× display running iOS ≥ 7: --> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png"> <!-- For iPad with @2× display running iOS ≤ 6: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png"> <!-- For iPhone with @2× display running iOS ≥ 7: --> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png"> <!-- For iPhone with @2× display running iOS ≤ 6: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png"> <!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7: --> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png"> <!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"> <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"><!-- 57×57px -->

Startup Image

针对这两款霸气外露的新设备的Startup Image 代码:

<!-- iOS 8 iPhone 6 (portrait) --> <link rel="apple-touch-startup-image" href="/apple-touch-startup-image-750×1294.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"> <!-- iOS 8 iPhone 6 (landscape) --> <link rel="apple-touch-startup-image" href="/apple-touch-startup-image-710x1334.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"> <!-- iOS 8 iPhone 6 Plus (portrait) --> <link rel="apple-touch-startup-image" href="/apple-touch-startup-image-1242×2148.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)"> <!-- iOS 8 iPhone 6 Plus (landscape) --> <link rel="apple-touch-startup-image" href="/apple-touch-startup-image-1182x2208.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)">

设计师请额外增加一些工作量,以上。

补充:viewport 中的minimal-ui

iOS 7.1 新添加的 minimal-ui (点击这里查看详情)在iOS8 中已经不再支持,没必要再使用了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏极客编程

Vuebnb:一个用vue.js和Laravel构建的全栈应用

今年我一直在写一本新书叫全栈Vue网站开发:Vue.js,Vuex和Laravel。它会在Packt出版社在2018年初出版。

16710
来自专栏编程

python编程

使用python编写客户端不是一件很复杂的事情。比如说,基本上不管是mac版本,还是windows版本、linux版本,一般python都默认安装了Tkinte...

283100
来自专栏Web项目聚集地

前端面试题(HTML和CSS)

我会推出前端面试题的专栏,每一期我会推出10个经典面试题,面试题一部分由小伙伴提供,一部分从面试真题中选出,最后会来一个大汇总。主要目的是帮助那些还没有前端开...

16620
来自专栏py+selenium

跨站脚本攻击(反射型xss)笔记(一)

 payload:  【    ';})</script><script>alert(1)</script>   】

1.6K30
来自专栏smy

js图片前端预览之 filereader 和 window.URL.createObjectURL

1 //preview img : filereader方式 2 document.getElementById('imgFile').onchan...

37370
来自专栏魏艾斯博客www.vpsss.net

宝塔 Linux 面板 RPM 极速安装体验过程

27230
来自专栏web编程技术分享

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第一节)

本教程是,原文章发布系统教程的精编重置版,会包含每一节的源码,以及修正之前的一些错误。因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一...

25130
来自专栏北京马哥教育

学习Vim的四周计划

16020
来自专栏儿童编程

儿童学编程,3分钟入门极简教程!

Scratch是一款由麻省理工学院(MIT)设计开发的少儿编程工具。使用者可以不认识英文单词,也可以不会使用键盘。就像搭积木一样把一块块积木形状的命令用鼠标拖拽...

1.6K30
来自专栏伪君子的梦呓

推荐几个油猴脚本

油猴,也就是 Tampermonkey 是我每一台电脑都会安装的东西,也是我会给熟人介绍和安装的东西。没什么好说的,就是好用。

5.2K20

扫码关注云+社区

领取腾讯云代金券