zoukankan      html  css  js  c++  java
  • 为 iPhone 和 iPad 自定义网站的主屏幕图标

    设定主屏幕图标

    看到上面的截图, 我想你会打算自定义一个图标了. iOS 的网页图标与传统的网页 favicon 相似, 处理方式也差不多, 下面会为你介绍几种处理方式.

    放置在默认位置

    创建一个 PNG 图片, 命名为 apple-touch-icon.png 或者 apple-touch-icon-precomposed.png, 放置在网站根目录即可.

    指定图标路径

    为页面指定一个图标路径, 在网页的 head 部分代码如下:

    <link rel="apple-touch-icon" href="/custom_icon.png"/>
    为不同设备指定图标

    在网页中为不同的设备指定特殊图标, 因为 iPhone 和 iPad 的图标尺寸不一样, 需要 sizes 属性来进行区分, 如果没有定义 sizes 属性, 默认 sizes 是 57 x 57. 代码如下:

    <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" />
    如果没有图片尺寸可以匹配设备图标的尺寸, 存在比设备图标大的图片, 将使用比设备图标尺寸略大的图片; 如果没有比设备图标大的图片, 则使用最大的图片.

    如果没有在网页中指定图标路径, 将会在根目录搜寻以 apple-touch-icon... 和 apple-touch-icon-precomposed... 作为前缀的 PNG 图片. 假设现在有一个设备的图标大小是 57 x 57, 系统将按以下顺序搜寻图标:

    apple-touch-icon-57x57-precomposed.png
    apple-touch-icon-57x57.png
    apple-touch-icon-precomposed.png
    apple-touch-icon.png
    主屏幕图标尺寸

    iPhone 和 iPod (iTouch) 使用的图标尺寸:

    57 x 57 pixels
    114 x 114 pixels (高分辨率, iPhone 4 或以上使用)
    iPad 使用的图标尺寸:

    72 x 72 pixels

  • 相关阅读:
    QML小例子【QML工程里信号与槽】
    TensorFlow基础笔记(11) conv2D函数
    tensorflow学习笔记(10) mnist格式数据转换为TFrecords
    tensorflow函数学习笔记
    各个层次的gcc警告
    opencv3.2 dnn 图像分割
    ubuntu16.04 安装caffe以及python接口
    linux profileashrcash_profile之间的区别和联系
    ubuntu 16.04 安装pycharm
    Ubuntu下配置samba实现文件夹共享
  • 原文地址:https://www.cnblogs.com/top5/p/2881633.html
Copyright © 2011-2022 走看看