meta标签到底能干吗?

mate

标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词)

mate属性

  • name
    name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下,您可以自由使用对自己和源文档的读者来说富有意义的名称。
  • http-equiv
    http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
  • content
    content 属性提供了名称/值对中的值(name, http-equiv)。该值可以是任何有效的字符串。
    content 属性始终要和 name 属性或 http-equiv 属性一起使用。

设定网页字符集

<meta http-equiv="content-Type" content="text/html;charset=utf-8">
<meta charset="utf-8">

关键字

<meta name="keywords" content="your,keywords">

响应式

<meta name="viewport" content="width=device-width, initial-scale=1">

  • viewport:能优化移动浏览器的显示。如果不是响应式网站,不要使用initial-scale或者禁用缩放。
  • width:宽度(数值 / device-width)(范围从200 到10,000,默认为980 像素)
  • height:高度(数值 / device-height)(范围从223 到10,000)
  • initial-scale:初始的缩放比例 (范围从>0 到10)
  • minimum-scale:允许用户缩放到的最小比例
  • maximum-scale:允许用户缩放到的最大比例
  • user-scalable:用户是否可以手动缩 (no,yes)
  • minimal-ui:可以在页面加载时最小化上下状态栏。(已弃用)
  • 注意,很多人使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染,
  • 用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1,
  • 则用户将不能放大/缩小网页来看到全部的内容。

移动设备相关(中国)

  • <meta name="HandheldFriendly" content="true">
  • <meta name="MobileOptimized" content="320">
  • <meta name="screen-orientation" content="portrait">
  • <meta name="x5-orientation" content="portrait">
  • <meta name="full-screen" content="yes">
  • <meta name="x5-fullscreen" content="true">
  • <meta name="browsermode" content="application">
  • <meta name="x5-page-mode" content="app">

Apple ios

  • <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
  • <meta name="format-detection" content="telephone=no">
  • <meta name="format-detection" content="email=no">
  • <meta name="apple-mobile-web-app-capable" content="yes">
  • <meta name="apple-mobile-web-app-status-bar-style" content="black">
  • <meta name="apple-mobile-web-app-title" content="App Title">
  • <link rel="apple-touch-icon" href="apple-touch-icon.png">
  • <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

Google android

<meta name="theme-color" content="#E64545">

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,338评论 19 139
  • 随着html5的普及和Web技术的净化,从Windows XP的IE6到IE8、IE9、IE10、IE11,Edg...
    波段顶底阅读 2,399评论 1 1
  • 其实这些东西大概在一年前就搞出来了,看了很多有关的文章,现在分享出来,如果对你有些帮助,我还是挺开心的。因为里面有...
    其心阅读 2,797评论 0 8
  • < meta > 元素概要标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于...
    TeslaChen阅读 1,072评论 0 1
  • 先附上几篇网上查找的关于meta标签的资料、文章,看完这个几篇文章后,会对meta标签有一定的了解!HTML me...
    米斯特卢阅读 1,743评论 0 2

友情链接更多精彩内容