常见meta和link标签

页面基本设置

<meta name="description" content="页面描述，控制在150字以内" />

<meta name="keywords" content="关键字列表" />

<meta name="author" content="basecss, [email protected]" />

<link rel="shortcut icon" type="image/icon" href="icon.ico" />

http 信息设置

<meta http-equiv="content-language" content="zh-CN" />

<meta http-equiv="refresh" content="3; URL=http://www.baidu.com" />

<meta http-equiv="content-type" content="UTF-8" />

<meta http-equiv="expires" content="GMT 格式时间" />

<meta http-equiv="pragma" content="no-cache" />

<meta http-equiv="Cache-control" content="max-age=5" />
  

<meta http-equiv="set-cookie" content="cookieName=cookieValue;expires=GMT 格式时间;path=/" />

<meta http-equiv="page-enter" content="blandtrans(duration=0.5)" />

<meta http-equiv="page-exit" content="revealtrans(duration=0.5,transtion=1)" />
  

搜索引擎相关设置

<meta name="visit-after" content="10 days">

<meta name="robots" content="index, follow" />
  

移动端开发

首先说明，移动开发是大前端开发的一部分，所以以上设置都是支持的。下文仅仅是移动端中特有的：

基本设置

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> 

<meta name="viewport" content="width=device-width,initial-scale=1, minium-scale=1, user-scalable=no" />

<meta name="apple-mobile-web-app-title" content="My App" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-status-bar-style" content="black-translucent" />

<meta name="format-detection" content="telephone=no" />

<meta name="format-detection" content="email=no" />

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" />


<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />

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

Windows Phone

<meta name="msapplication-TileColor" content="#000"/>

<meta name="msapplication-TileImage" content="icon.png"/>

Android

常见设置

iOS 设置

iOS 图标

<link rel="apple-touch-icon" href="icon57.png" sizes="57x57" />

<link rel="apple-touch-icon" href="icon72.png" sizes="72x72" />

<link rel="apple-touch-icon" href="icon76.png" sizes="76x76" />

<link rel="apple-touch-icon" href="icon114.png" sizes="114x114" />

<link rel="apple-touch-icon" href="icon120.png" sizes="120x120" />

<link rel="apple-touch-icon" href="icon144.png" sizes="144x144" />

<link rel="apple-touch-icon" href="icon152.png" sizes="152x152" />

iOS启动画面

<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />

<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" />

<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" />

<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" />

<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" />

<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" />

<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" />

一些常见的 JS 代码设置

防止 iOS 表单聚焦时自动缩放

<script type="text/javascript">
  var $target = $('.unscalable');
  var $viewport = $('meta[name="viewport"]');
  $target.bind('focus blur', function(e){
    $viewport.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' + (e.type == "blur" ? 10 : 1));
  })
script>

动态选择预加载界面

<script type="text/javascript">
   var filename= navigator.platform === 'iPad' ? 'h/' : "l/";
   document.write(`"apple-touch-startup-image", href="/img/${filename}splash.png`);
script>