查看: 2702|回复: 0

[DIV/CSS] html头部meta属性大全——各种奇葩属性设置大归类

发表于 2018-4-6 08:00:00
常用通用属性:

网页相关信息设置

http-equiv属性


IOS的头部设置

iOS 图标设置

iOS 启动画面

一些特殊浏览器的设置:QQ浏览器相关设置:

UC浏览器相关设置:

360浏览器:

windows相关设备:

其他设备设置:

最后讲讲常用的老浏览器霸主IE

X-UA-Compatible是神马?

X-UA-Compatible是IE8的一个专有属性,它告诉IE8采用何种IE版本去渲染网页,在html的标签中使用。可以在微软官方文档获取更多介绍。

为什么要用X-UA-Compatible?

在IE8刚推出的时候,很多网页由于重构的问题,无法适应较高级的浏览器,所以使用X-UA-Compatible标签强制IE8采用低版本方式渲染。

使用下面这段代码后,开发者无需考虑网页是否兼容IE8浏览器,只要确保网页在IE6、IE7下的表现就可以了。

使用下面这段代码使用的是Edge 。模式Edge 模式告诉 IE 以最高级模式渲染文档,也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染,避免版本升级造成的影响。简单的说,就是什么版本 IE 就用什么版本的标准模式渲染。

使用以下代码强制 IE 使用 Chrome Frame 渲染

最佳的兼容模式方案:

ps:为防止失效,X-UA-Compatible最好紧跟在head之后,之前不要有任何不标准的标签。



下面是配置大全

  1. <link rel="dns-prefetch" href="//www.zhoulujun.cn">
  2. <!--设置dns缓存-->
  3. <meta name="applicable-device" content="pc,mobile">
  4. <!--设置支持终端-->
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  6. <!--设置屏幕缩放-->
  7. <meta http-equiv="content-Type" content="text/html;charset=gb2312">
  8. <!--设定页面使用的字符集。-->
  9. <meta http-equiv="Content-Language" content="zh-cn"/>
  10. <!--设定显示语言-->
  11. <meta name="keywords" content="周陆军"/>
  12. <!--设置网页关键词,SEO-->
  13. <meta name="description" content="周陆军网站"/>
  14. <!--设置网页内容描述,SEO-->
  15. <meta name="author" content="周陆军"/>
  16. <!--设置网页作者-->
  17. <meta name="generator" content="intellij"/>
  18. <!--说明网站的采用的什么软件制作-->
  19. <meta name='Copyright' content='zhoulujun'>
  20. <!--说明网站版权信息-->
  21. <meta name="apple-mobile-web-app-title" content="周陆军的个人网站">
  22. <!-- 添加到主屏后的标题(iOS 6 新增) -->
  23. <meta name="apple-mobile-web-app-capable" content="yes"/>
  24. <!-- 是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏 -->
  25. <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=http://www.zhoulujun.cn">
  26. <!-- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari) -->
  27. <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  28. <!-- 设置苹果工具栏颜色 -->
  29. <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
  30. <!-- iPhone 和 iTouch,默认 57x57 像素,必须有 -->
  31. <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
  32. <!-- Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有 -->
  33. <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
  34. <!-- Retina iPad,144x144 像素,可以没有,但推荐有 -->
  35. <meta name="x5-orientation" content="portrait">
  36. <!-- QQ强制竖屏 -->
  37. <meta name="x5-fullscreen" content="true">
  38. <!-- QQ强制全屏 -->
  39. <meta name="x5-page-mode" content="app">
  40. <!-- QQ应用模式 -->
  41. <!-- UC强制竖屏 -->
  42. <meta name="screen-orientation" content="portrait">
  43. <!-- UC强制全屏 -->
  44. <meta name="full-screen" content="yes">
  45. <!-- UC应用模式 -->
  46. <meta name="browsermode" content="application">
  47. <meta name="renderer" content="webkit">
  48. <!-- 启用360浏览器的极速模式(webkit) -->
  49. <meta name="msapplication-tap-highlight" content="no">
  50. <!-- windows phone 点击无高光 -->
  51. <meta name="msapplication-TileColor" content="#000"/>
  52. <!-- Windows 8 磁贴颜色 -->
  53. <meta name="msapplication-TileImage" content="icon.png"/>
  54. <!-- Windows 8 磁贴图标 -->
  55. <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
  56. <!-- 添加 RSS 订阅 -->
  57. <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
  58. <!-- 添加 favicon icon -->
  59. <meta name="HandheldFriendly" content="true">
  60. <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
复制代码



参考文章: http://www.bubblypoker.com/2016/11/07/h5%E5%A4%B4%E9%83%A8meta%E6%95%B4%E7%90%86/

http://www.cnblogs.com/nidilzhang/archive/2010/01/09/1642887.html

http://www.cnblogs.com/chendc/p/5423337.html

转载请注明文章出处:html头部meta属性大全--各种奇葩属性设置大归类 - html5 - 周陆军的个人网站




回复

使用道具 举报