移动前端开发中添加一些webkit专属的HTML5头部标签，帮助浏览器更好解析html代码，更好地将移动web前端页面表现出来。本文整理一些常用的meta标签。

  1. <!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
  2. <html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
  3. <head>
  4.  <!-- 声明文档使用的字符编码 -->
  5.  <meta charset='utf-8'>
  6.  <!-- 优先使用 IE 最新版本和 Chrome -->
  7.  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  8.  <!-- 页面描述 -->
  9.  <meta name="description" content="不超过150个字符"/>
  10.  <!-- 页面关键词 -->
  11.  <meta name="keywords" content=""/>
  12.  <!-- 网页作者 -->
  13.  <meta name="author" content="name, email@gmail.com"/>
  14.  <!-- 搜索引擎抓取 -->
  15.  <meta name="robots" content="index,follow"/>
  16.  <!-- 为移动设备添加 viewport -->
  17.  <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
  18.  <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
  19.  
  20.  <!-- iOS 设备 begin -->
  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.  
  26.  <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
  27.  <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
  28.  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  29.  <!-- 设置苹果工具栏颜色 -->
  30.  <meta name="format-detection" content="telphone=no, email=no"/>
  31.  <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
  32.  <!-- 启用360浏览器的极速模式(webkit) -->
  33.  <meta name="renderer" content="webkit">
  34.  <!-- 避免IE使用兼容模式 -->
  35.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  36.  <!-- 不让百度转码 -->
  37.  <meta http-equiv="Cache-Control" content="no-siteapp" />
  38.  <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
  39.  <meta name="HandheldFriendly" content="true">
  40.  <!-- 微软的老式浏览器 -->
  41.  <meta name="MobileOptimized" content="320">
  42.  <!-- uc强制竖屏 -->
  43.  <meta name="screen-orientation" content="portrait">
  44.  <!-- QQ强制竖屏 -->
  45.  <meta name="x5-orientation" content="portrait">
  46.  <!-- UC强制全屏 -->
  47.  <meta name="full-screen" content="yes">
  48.  <!-- QQ强制全屏 -->
  49.  <meta name="x5-fullscreen" content="true">
  50.  <!-- UC应用模式 -->
  51.  <meta name="browsermode" content="application">
  52.  <!-- QQ应用模式 -->
  53.  <meta name="x5-page-mode" content="app">
  54.  <!-- windows phone 点击无高光 -->
  55.  <meta name="msapplication-tap-highlight" content="no">
  56.  <!-- iOS 图标 begin -->
  57.  <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
  58.  <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
  59.  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
  60.  <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
  61.  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
  62.  <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
  63.  <!-- iOS 图标 end -->
  64.  
  65.  <!-- iOS 启动画面 begin -->
  66.  <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
  67.  <!-- iPad 竖屏 768 x 1004（标准分辨率） -->
  68.  <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
  69.  <!-- iPad 竖屏 1536x2008（Retina） -->
  70.  <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
  71.  <!-- iPad 横屏 1024x748（标准分辨率） -->
  72.  <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
  73.  <!-- iPad 横屏 2048x1496（Retina） -->
  74.  
  75.  <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
  76.  <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
  77.  <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
  78.  <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
  79.  <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
  80.  <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
  81.  <!-- iOS 启动画面 end -->
  82.  
  83.  <!-- iOS 设备 end -->
  84.  <meta name="msapplication-TileColor" content="#000"/>
  85.  <!-- Windows 8 磁贴颜色 -->
  86.  <meta name="msapplication-TileImage" content="icon.png"/>
  87.  <!-- Windows 8 磁贴图标 -->
  88.  
  89.  <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
  90.  <!-- 添加 RSS 订阅 -->
  91.  <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
  92.  <!-- 添加 favicon icon -->
  93.  
  94.  <!-- sns 社交标签 begin -->
  95.  <!-- 参考微博API -->
  96.  <meta property="og:type" content="类型" />
  97.  <meta property="og:url" content="URL地址" />
  98.  <meta property="og:title" content="标题" />
  99.  <meta property="og:image" content="图片" />
  100.  <meta property="og:description" content="描述" />
  101.  <!-- sns 社交标签 end -->
  102.  
  103.  <title>标题</title>
  104. </head>

移动前端头部标签(HTML5 head meta)的更多相关文章

  1. 移动前端头部标签(HTML5 head meta)转载

    移动web页面头部书写 字数2516 阅读1128 评论0 喜欢30 HTTP 标题信息(http-equiv) 和页面描述信息(name) http-equiv:该枚举的属性定义,可以改变服务器和用 ...

  2. 移动前端头部标签(HTML5 meta)

    在移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码 <!DOCTYPE html>  使用 HTML5 doctype,不区分大小写 <he ...

  3. 移动前端不得不了解的HTML5 head 头标签 —— HTML基本的头部标签

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容, ...

  4. HTML5头部标签中<meta>常用信息

    整理一些平时常用的,方便查阅 <!-- 字体编码 --> <meta charset="utf-8" /> <!-- 关键字 --> <m ...

  5. webkit,HTML5头部标签

    大家都知道在移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来.本文整理一些HTML5头部<meta>标签常用的 ...

  6. 前端 HTML 常用标签 head标签相关内容 meta标签

    meta标签 Meta标签介绍: <meta>元素可提供有关页面的元信息(mata-information),针对搜索引擎和更新频度的描述和关键词. <meta>标签位于文档的 ...

  7. 移动端web页面开发常用的头部标签设置

    在移动端web页面开发中,我们常需要设置各种头部标签以帮助浏览器更好的解析页面,将页面完美呈现,这里列出了工作中常用的各种头部标签,以备查询. viewport <meta name=" ...

  8. 【03】HTML head 头部分的标签说明 和 手机头部标签说明

    HTML head 头部分的标签.元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性.移动互联网时代,head 头部结 ...

  9. 细说HTML头部标签

    原文 简书原文:https://www.jianshu.com/p/4270b1d1037d 大纲 1.头部标签列表 2.头部标签详解 1.头部标签列表 <!DOCTYPE html> & ...

随机推荐

  1. Lattice 的 Framebuffer IP核使用调试笔记之IP核生成与参数设置

    本文由远航路上ing 原创,转载请标明出处. 这节笔记记录IP核的生成以及参数设置. 先再IP库里下载安装Framebuffer 的ipcore 并安装完毕. 一.IP核的生成: 1.先点击IP核则右 ...

  2. python 连接sql server

    linux 下pymssql模块的安装 所需压缩包:pymssql-2.1.0.tar.bz2freetds-patched.tar.gz 安装: tar -xvf pymssql-2.1.0.tar ...

  3. 一般处理程序获取session值

    1.要在一般处理程序中获取其他页面的session值,需要引用名空间: using System.Web.SessionState; 2.然后继承一个接口:IRequiresSessionState, ...

  4. 在Eclipse中自定义类似syso的快捷代码模板

    sysout/syso syserr/ syse 点击菜单栏的“Window”->“Preferences”,打开“Preferences”对话框.在Preferences”对话框中点击“Jav ...

  5. 在ubuntu上搭建开发环境8---Ubuntu搭建Android开发环境

    需要首先配置好JDK环境 参看:http://www.cnblogs.com/xumenger/p/4460055.html 安装Eclipse 在Android developer的官网上直接下载a ...

  6. 南阳理工 题目9:posters（离散化+线段树）

    posters 时间限制:1000 ms  |  内存限制:65535 KB 难度:6   描述 The citizens of Bytetown, AB, could not stand that ...

  7. WPF ItemsControl ListBox ListView比较

    在进行列表信息展示时,WPF中提供多种列表可供选择.这篇博客将对WPF ItemsControl, ListBox, ListView进行比较. 相同点: 1. 这三个控件都是列表型控件,可以进行列表 ...

  8. hdu 4046 2011北京赛区网络赛G 线段树 ***

    还带这么做的,卧槽,15分钟就被A了的题,居然没搞出来 若某位是1,则前两个为wb,这位就是w #include<cstdio> #include<cstring> #defi ...

  9. 遍历List过程中删除元素的正确做法(转)

    遍历List过程中删除元素的正确做法   public class ListRemoveTest {     3 public static void main(String[] args) { 4 ...

  10. 生成n位随机字符串

    --1.借助newid() Go --创建视图(因为在函数中无法直接使用newid()) create view vnewid as select newid() N'MacoId'; go --创建 ...