zoukankan      html  css  js  c++  java
  • iOS / Android 移动设备中的 Touch Icons

    上次转载了一篇《将你的网站打造成一个iOS Web App》,但偶然发现这篇文章的内容有些是错误的——准确来说也不是错误,只是不适合自半年前来的情况了(也可以说是iOS7 之后的时间)——话说现在的的移动设备真是日新月异。好了,结合Jeff 查阅的资料,下面来详细来说说iOS / Android 移动设备中的 touch icons。

    关于 “Touch icons”

    favicons 知道是什么吧?浏览器的tab 前面的那个小图标,放入某个网站到收藏夹的时候也会看到,这个可以说是pc 互联网的产物了。而Touch icons 则是移动互联网的产物,用于手机、平板等移动设备上。为你的网站添加个Touch icons 可以用类似下面的代码:

    1
    
    <link rel="apple-touch-icon" href="apple-touch-icon.png">

    这个只是基础的演示代码,一般我们不这么用。在深入讲解之前先再给出另外一行代码:

    1
    
    <link rel="icon" sizes="196x196" href="apple-touch-icon.png">

    上面这个是则有点不同,rel="icon",可喜的是,Chrome v31+ for Android 以上的版本支持这个;但遗憾的是,苹果的设备不支持这个。

    考虑到最大的兼容性,Chrome for Android 做了一定的牺牲,那就是,如果再你的网页上找不到上面的代码,就会向下兼容,跟随者苹果的设备支持的touch icons(类似一开头的代码)。

    Fancy effects

    也许你看到过这么两种代码:

    1
    2
    
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

    那么,多出来的precomposed 表示神马意思呢?没有precomposed 代码,一些包括圆角,阴影,反光的特效便会自动添加到生成的本地app 的logo 中。是自iOS 2.0 开始的,但如今随着iOS7 的出现,已经变得可有可无了。

    不同的Touch icons 尺寸

    (接下来讲的基本上是apple 的设备)考虑到不同设备的分辨率以及屏幕材质的问题,为了最佳的显示体验,你可以用sizes标签定义下,如:

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

    apple 开发者官网中,为不同的apple 设备推荐了相应的size,比如:

    iPad with Retina:144 × 144 pixels 152 × 152 pixels
    iPhone with Retina:114 × 114 pixels 120 × 120 pixels

    为什么有个删除线的?114、144的像素比是之前的,随着iOS7 出来后,官方推荐size 变成120、152的。单独考虑apple 的设备,iphone 有无Retina 的,ipad有无Retina 的,ipadmini有无Retina 的皆要一一考虑,还有不同的iOS 版本…… 一句话,挺烦了,国外有人给出了下面的比较涵盖、兼容的代码(直接看注释吧):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    
    <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
    <!-- For the iPad mini and the first- and second-generation iPad on iOS ≤ 6: -->
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
    <!-- For the iPad mini and the first- and second-generation iPad on iOS ≥ 7: -->
    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
    <!-- For iPhone with high-resolution Retina display running iOS ≤ 6: -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
    <!-- For iPhone with high-resolution Retina display running iOS ≥ 7: -->
    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
    <!-- For iPad with high-resolution Retina display running iOS ≤ 6: -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
    <!-- For iPad with high-resolution Retina display running iOS ≥ 7: -->
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">

    有些人还考虑到iOS 4.2 之前的版本不支持size 标签,所以sizes 标签应该去掉,对此,我认为没必要。

    后记

    上面的内容大部分是翻译http://mathiasbynens.be/notes/touch-icons 这篇e 文的,翻译的过程中加入了自己的理解。当然,以我英文的水平,不敢担保有没有曲解原文或者有大错误,如有,望指正。

    话说就为了这么个东西就要写那么多代码,连图片也要ps 好几个,真心累人。我说,代码是死的,而且不是每个人都用apple 的设备的,确实是没有必要过于考虑完全——不然累的是自己。其实原文还有一些内容的,但这篇文章就这样结束了。

  • 相关阅读:
    几个新角色:数据科学家、数据分析师、数据(算法)工程师
    人类投资经理再也无法击败电脑的时代终将到来了...
    Action Results in Web API 2
    Multiple actions were found that match the request in Web Api
    Routing in ASP.NET Web API
    how to create an asp.net web api project in visual studio 2017
    网站漏洞扫描工具
    How does asp.net web api work?
    asp.net web api history and how does it work?
    What is the difference between a web API and a web service?
  • 原文地址:https://www.cnblogs.com/doseoer/p/5946037.html
Copyright © 2011-2022 走看看