zoukankan      html  css  js  c++  java
  • iPhone 收藏网址[添加到书签] 和 [添加到主屏幕] 显示自定义图标,而不是网页截图

    iPhone 收藏网址[添加到书签] 和 [添加到主屏幕] 显示自定义图标,而不是网页截图:

    <!-- Safari浏览器[添加到书签] -->   

    <link rel="shortcut icon" href="static/my/img/favicon.ico">   

    <!-- Safari浏览器[添加到主屏幕] -->   

    <link rel="apple-touch-icon" href="static/my/img/favicon.ico"/>

    https://www.zhihu.com/question/19572446

    在网站根目录放一张命名为 apple-touch-icon.png 的 57 × 57 像素图片即可达到基本目的。

    如果需要更精确的控制:

    1. 在网站 head 部分添加以下语句,其中 href 属性值是图片的路径。

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

    2. 为满足不同分辨率设备的显示效果,可以添加三个不同分辨率的图片:57 × 57 像素用于前三代 iPhone 和 iPod touch ,72 × 72 像素用于 iPad ,114 × 114 像素用于采用 Retina display 的 iPhone 4 和 iPod touch 等后续产品。通过 sizes 属性控制:

    <link rel="apple-touch-icon" href="touch-icon-iphone.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

    3. 还可以把 rel 属性修改为“apple-touch-icon-precomposed”来避免 iOS 向你的图标添加高光效果。

  • 相关阅读:
    耐心
    百度年会
    聊聊今年的春节联欢晚会
    网速调查
    热烈欢迎两位园友加盟
    遥远的路
    博客园博客程序架构设计图初稿
    [公告]社区与博客实现了登录整合
    博客园上海俱乐部第二次活动继续报道
    [收藏]《观察与思考》:相信中国,寻找下一个比尔·盖茨
  • 原文地址:https://www.cnblogs.com/xyhero/p/9344600.html
Copyright © 2011-2022 走看看