Loading

HTML中神奇的meta标签

<!-- 有时,Google在结果页面会提供一个翻译链接,但有时候你不希望出现这个链接,你可以添加这样一个meta标签 -->
<meta name="google" content="notranslate" />

<!-- 使用这个meta标签你可以控制浏览器在一段时间之后自动刷新。举例说明,下面的代码表示每隔30秒网页自动更新 -->
<meta http-equiv="refresh" content="30" />

<!-- 你也可以在刷新之后跳转到另外一个页面 -->
<meta http-equiv="refresh" content="30;URL=http://website.com" />

<!-- 开启ie8渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<!-- width - viewport的宽度 height - viewport的高度initial-scale - 初始的缩放比例 -->
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- description(网站内容描述) -->
<meta name="description" content="" />

<!-- 这些元标记控制搜索引擎如何抓取和索引页。 "robots"元标记指定的规则适用于所有搜索引擎 -->
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<!-- all:文件将被检索,且页面上的链接可以被查询; none:文件将不被检索,且页面上的链接不可以被查询; index:文件将被检索; follow:页面上的链接可以被查询; noindex:文件将不被检索; nofollow:页面上的链接不可以被查询。 -->

<!-- 说明这个网页的作者是 author name  网络爬虫robot (Google,百度等搜索引擎)会读取网页中meta项将其作为索引,大家搜索网页时搜索“author name”时就会搜到这个网页了-->
<meta name="author" content="author name" />

<!-- 启用 WebApp 全屏模式 如果safari不开启全屏模式,那么通过safari浏览该html的时候保存的Cookie等其他数据不会被清空-->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- 隐藏状态栏/设置状态栏颜色:只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。 -->
<meta
  name="apple-mobile-web-app-status-bar-style"
  content="black-translucent"
/>

<!-- 添加到主屏后的标题 -->
<meta name="apple-mobile-web-app-title" content="标题" />

<!-- 忽略数字自动识别为电话号码 -->
<meta content="telephone=no" name="format-detection" />

<!-- 忽略识别邮箱 -->
<meta content="email=no" name="format-detection" />

<!--app里面从页面下载一个app图标 告诉浏览器网站对应的是什么app-->
<meta
  name="apple-itunes-app"
  content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"
/>
<!-- 添加智能 App 广告条 Smart App Banner:告诉浏览器这个网站对应的app,并在页面上显示下载banner:https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html -->

<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true" />

<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320" />、

<!-- uc强制竖屏 -->
<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" />

<!-- 是否删除默认的苹果工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit" />

<!--如果 apple-mobile-web-app-capable 设置为 yes 了,苹果为iOS设备配备了apple-touch-icon私有属性,添加该属性,在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上,方便用户以后访问。-->
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />
<!--而设置相应 apple-touch-icon 标签,则添加到主屏上的图标就会使用我们指定的图片。案例:-->
<!-- Standard iPhone -->
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
<!-- Retina iPhone -->
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
<!-- Standard iPad -->
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />
<!-- Retina iPad -->
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />

<!--当把网站通过safari添加到主屏幕功能放置到移动设备桌面上以后,通过设置apple-touch-startup-image可以为WebApp设置一个类似NativeApp的启动画面。-->
<!--在iPhone及iTouch设备上,只支持竖屏模式,图片分辨率为320×460。在iPad上支持竖屏和横屏两种模式,分辨率分别为768x1004和748x1024,注意横屏模式的图片宽高以及内容显示方式。-->
<!-- apple-touch-startup-image不支持sizes属性,因此,不能像 apple-touch-icon 一样用sizes来支持多种设备屏幕,这里要用到media querys属性 -->
<link rel="apple-touch-startup-image" href="/startup.png" />

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

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

<link
  rel="apple-touch-startup-image"
  href="/startup.png"
  media="screen and (max-device-width: 320)"
/>
posted @ 2021-05-18 14:48  Frank-Link  阅读(194)  评论(0编辑  收藏  举报