[关闭]
@king- 2014-12-04T15:01:45.000000Z 字数 2819 阅读 893

HTML5 meta 的相关设置

HTML

  1. <!DOCTYPE html> <!-- HTML5 doctype 不区分大小写 -->
  2. <html lang="zh-cmn-Hans-CN"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
  4. <head>
  5. <meta charset="UTF-8">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 优先使用IE最新版本和 Chrome -->
  8. <meta name="renderer" content="webkit|ie-comp|ie-stand"> <!-- 360 浏览器内核控制 -->
  9. <!--
  10. content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。
  11. 若页面需默认用极速核，增加标签：<meta name="renderer" content="webkit"> 
  12. 若页面需默认用ie兼容内核，增加标签：<meta name="renderer" content="ie-comp"> 
  13. 若页面需默认用ie标准内核，增加标签：<meta name="renderer" content="ie-stand">
  14. -->
  16. <!-- width=device-width 会导致 iPhone 5 添加到主屏后以 WebAPP 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
  17. <meta name ="viewport" content ="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1,user-scalable=no">
  19. <meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏时的标题 -->
  21. <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebAPP 全屏模式 -->
  23. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 状态条颜色 -->
  25. <meta name="format-detection" content="telephone=no" /> <!-- 屏蔽数字自动识别为电话号码 -->
  27. <!-- favicon 图标 -->
  28. <link type="image/x-icon" rel="icon" href="http://static.example.com/favicon.ico"/>
  29. <link type="image/x-icon" rel="shortcut icon" href="http://static.example.com/favicon.ico"/>
  30. <link type="image/x-icon" rel="bookmark" href="http://static.example.com/favicon.ico"/>
  32. <!-- iOS 图标 begin -->
  33. <!--默认 57x57 像素-->
  34. <link rel="apple-touch-icon-precomposed" href="http://wanke.etao.com/assets/img/icon/57/apple-touch-icon-57x57-precomposed.png" />
  35. <!--iPad 1 72x72 像素-->
  36. <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://wanke.etao.com/assets/img/icon/72/apple-touch-icon-72x72-precomposed.png" />
  37. <!--iPhone 4 114x114 像素-->
  38. <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://wanke.etao.com/assets/img/icon/114/apple-touch-icon-114x114-precomposed.png" />
  39. <!-- iOS 图标 end -->
  41. <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
  42. <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
  44. <!-- SEO 优化 -->
  45. <meta name="description" content="" /> <!-- 页面描述 -->
  46. <meta name="keywords" content=""/> <!-- 页面关键词 -->
  47. <title>页面标题</title>
  49. <!-- iOS 应用启动界面设置 begin -->
  50. <!-- iPad Landscape – 1024 x 748 -->
  51. <link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
  52. <!-- iPad Portrait – 768 x 1004 -->
  53. <link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />
  54. <!-- iPhone/iPod Touch Portrait – 320 x 480 (standard resolution) -->
  55. <link rel="apple-touch-startup-image" href="img/splash-screen-320x480.png" />
  56. <!-- iPhone/iPod Touch Portrait – 640 x 960 pixels (high-resolution) -->
  57. <link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />
  58. <!-- iOS 应用启动界面设置 end -->
  59. </head>

width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注