响应式页面页头一些设定

  • 发布日期:2016年3月30日
  • 新闻类别: HTML5/CSS3/JS
  • 查看:843

响应式网站的一些页头设置:


<meta name=apple-mobile-web-app-title content="兴得互联" />
    <meta name="Resource-type" content="Document" />
    <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57x57-precomposed.png" />
    <link rel="apple-touch-startup-image" sizes="768x1004" href="img/loading-768x1004.png" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
    <meta name="format-detection" content="telephone=yes"/>
    <meta name="format-detection" content="telephone=yes"/>
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">

苹果开始画面:

<link rel="apple-touch-startup-image" media="screen and (orientation: portrait)" href="milanoo_startup.png" /> <!--竖-->
<link rel="apple-touch-startup-image" media="screen and (orientation: landscape)" href="milanoo_startup1.png" /> <!--横-->

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

 

<!-- iPhone 3GS, 2011 iPod Touch -->
<link rel="apple-touch-startup-image" href="startup-320x460.png" media="screen and (max-device-width : 320px)">

<!-- iPhone 4, 4S and 2011 iPod Touch -->
<link rel="apple-touch-startup-image" href="startup-640x920.png" media="(max-device-width : 480px) and (-webkit-min-device-pixel-ratio : 2)">

<!-- iPhone 5 and 2012 iPod Touch -->
<link rel="apple-touch-startup-image" href="startup-640x1096.png" media="(max-device-width : 548px) and (-webkit-min-device-pixel-ratio : 2)">

<!-- iPad landscape -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="startup-1024x748.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)">

<!-- iPad Portrait -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="startup-768x1004.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)">

 

标题栏上的一些图标设置:

 

<link rel="shortcut icon" href="/favicon.ico">
<link rel="shortcut icon" href="/favicon.png">

 

Updated list October 2015, iOS9
<!-- 57x57 (precomposed) for iPhone 3GS, 2011 iPod Touch and older Android devices -->
<!-- iPhone(first generation or 2G), iPhone 3G, iPhone 3GS -->
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png">
<!-- iPad and iPad mini @1x -->
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<!-- iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6s -->
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<!-- iPad and iPad mini @2x -->
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<!-- iPad Pro -->
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<!-- iPhone 6 Plus and iPhone 6s Plus -->
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">