HTML5技术

移动端meta行大全 - Candice&Gladys(3)

字号+ 作者:H5之家 来源:H5之家 2017-06-27 14:00 我要评论( )

!-- windows phone 点击无高光 -- meta name= "msapplication-tap-highlight" content= "no" 1. apple-touch-icon link rel= "apple-touch-icon" sizes= "76x76" href= "touch-icon-ipad.png" 如果 apple-mobile-we

<!-- windows phone 点击无高光 -->

<meta name="msapplication-tap-highlight" content="no">

1. apple-touch-icon
< link rel= "apple-touch-icon" sizes= "76x76" href= "touch-icon-ipad.png">
如果 apple-mobile-web-app-capable 设置为 yes 了,

那么在苹果机的safari上可以通过添加到主屏按钮将网站添加到主屏幕上。

而设置相应 apple-touch-icon 标签,则添加到主屏上的图标就会使用我们指定的图片。

2. apple-touch-startup-image
< link rel= "apple-touch-startup-image" href= "/startup.png">
基于 apple-mobile-web-app-capable 设置为 yes ,

可以为WebApp设置一个类似NativeApp的启动画面。

和 apple-touch-icon 不同,

apple-mobile-web-app-capable 不支持sizes属性,

要使用media来加载不同的启动画面。

 

// iPhone <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />

 

// iPhone Retina <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image" />

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • C#开发移动应用系列(3.使用照相机扫描二维码+各种基础知识) - GuZhenYin

    C#开发移动应用系列(3.使用照相机扫描二维码+各种基础知识) - GuZhen

    2017-06-24 17:01

  • 移动端页面布局的那些事儿 - 小矮人Web前端

    移动端页面布局的那些事儿 - 小矮人Web前端

    2017-06-14 14:00

  • C#开发移动应用系列(1.环境搭建) - GuZhenYin

    C#开发移动应用系列(1.环境搭建) - GuZhenYin

    2017-06-10 11:00

  • 是时候开始用C#快速开发移动应用了 - 腾飞(Jesse)

    是时候开始用C#快速开发移动应用了 - 腾飞(Jesse)

    2017-06-08 16:01

网友点评