拖延症自救篇第一章——meta标签属性

声明文档使用的字符编码

<meta charset="UTF-8" />

优先使用ie的最新版本和chrome

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

页面描述

<meta name="description" content="不超过150个字符" />

页面关键字

<meta name="keywords" content="" />

页面作者

<meta name="author" content="name,email@gmail.com" />

搜索引擎抓取

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

为移动设备添加viewport

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

适用于iOS设备的meta属性

添加到主屏后的标题(iOS6新增)

<meta name="apple-mobile-web-app-title" content="标题" />

是否启用 WebApp全屏模式,删除苹果默认的工具栏和菜单栏

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

添加智能 APP 广告条Smart App Banner (iOS 6+ Safari)

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

设置苹果工具栏颜色

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

忽略页面中的数字识别为电话,忽略email识别

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

启动360浏览器的极速模式(webkit)

<meta name="renderer" content="webkit" />

避免使用IE的兼容模式,告诉IE以最高模式渲染文档

<meta http-equiv="X-UA-Compatible" content="id=edge" />

不让百度转码

<meta http-equiv="Cache-Control" content="no-siteapp" />

针对手持设备优化,主要针对一些老的不识别viewport的浏览器

<meta name="HandheldFriendly" content="true" />

微软的老式浏览器

<meta name="MobileOptimized" content="320" />

UC强制竖屏

<meta name="screen-orientation" content="portrait" />

QQ强制竖屏

<meta name="x5-orientation" content="portait" />

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" />

windows phone 点击无高光

<meta name="msapplication-tap-highlight" content="no" />

iOS图标(link标签)

iPhone 和 iTouch,默认 57x57 像素,必须有

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

Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有

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

Retina iPad,144x144 像素,可以没有,但推荐有

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

iOS启动画面

iPad 竖屏 768 x 1004(标准分辨率)

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

iPad 竖屏 1536x2008(Retina)

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

iPad 横屏 1024x748(标准分辨率)

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

iPad 横屏 2048x1496(Retina)

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

iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

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

iPhone/iPod Touch 竖屏 640x960 (Retina)

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

iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)

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

Windows 8 磁贴颜色

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

Windows 8 磁贴图标

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

添加 RSS 订阅

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

添加 favicon icon

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

这里卿洋
愿喜❤️

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容