html 桌面图标 apple-touch-icon-precomposed

香菊网 发表于: 2019-06-17 分类: H5部分  前端front  HTML&CSS  

apple-touch-icon 和 apple-touch-icon-precomposed两种属性,从字面意思上可以看出,第一个是 “苹果移动设备图标”,第二个为“苹果移动设备初始图标样式”,

示例:

html图标

apple-touch-icon:

图标高亮

<link rel="apple-touch-icon" 
  href="https://f.ishangjie.com/h5/common/icon/commonShare.png">

apple-touch-icon-precomposed:

初始图标、图片自动处理成圆角和高光等效果。

<link rel="apple-touch-icon-precomposed" 
  href="https://f.ishangjie.com/h5/common/icon/commonShare.png">

设置不同设备的兼容

size属性

<link rel="apple-touch-icon-precomposed" sizes="57x57" 
  href="https://f.ishangjie.com/h5/common/icon/commonShare.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72" 
  href="https://f.ishangjie.com/h5/common/icon/commonShare.png">

<link rel="apple-touch-icon-precomposed" sizes="114x114" 
  href="https://f.ishangjie.com/h5/common/icon/commonShare.png">

<link rel="apple-touch-icon-precomposed" sizes="144x144" 
  href="https://f.ishangjie.com/h5/common/icon/commonShare.png">

media属性

<link 
  rel="apple-touch-startup-image" 
  href="https://f.ishangjie.com/h5/common/icon/commonShare.png" 
  media="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)">
标签: H5部分前端frontHTML&CSS
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮