<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->

<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 -->
<head>
    <!-- 声明文档使用的字符编码 -->
    <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="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
    <!-- iOS 设备 begin -->
    <meta name="apple-mobile-web-app-title" content="标题">
    <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no"/>
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别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">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- iOS 图标 begin -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
    <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
    <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
    <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
    <!-- iOS 图标 end -->
    <!-- iOS 启动画面 begin -->
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
    <!-- iPad 竖屏 768 x 1004（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
    <!-- iPad 竖屏 1536x2008（Retina） -->
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
    <!-- iPad 横屏 1024x748（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
    <!-- iPad 横屏 2048x1496（Retina） -->
    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
    <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
    <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
    <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
    <!-- iOS 启动画面 end -->
    <!-- iOS 设备 end -->
    <meta name="msapplication-TileColor" content="#000"/>
    <!-- Windows 8 磁贴颜色 -->
    <meta name="msapplication-TileImage" content="icon.png"/>
    <!-- Windows 8 磁贴图标 -->
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
    <!-- 添加 RSS 订阅 -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
    <!-- 添加 favicon icon -->
    <title>标题</title>
</head>

转载于:https://www.cnblogs.com/xiaofang-FE/p/6808287.html

移动端的头部标签和meta相关推荐

  1. 百度能抓取html5标签,HTML5头部标签代码，可以禁止百度转码！

    如今是移动端的天下了,早在2011年智能手机开始大规模普及的时候,谁有不会想到互联网如今的趋势,要不然我们每个搞网络的人好像都可以改变本身的命运,曩昔的就让它曩昔吧,捉住将来才是如今要做的事,今天禀享 ...

  2. 多个html如何套用套一个头部,Vue.js项目中管理每个页面的头部标签的两种方法...

    在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title ,我们只能去修改 index.html 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title ...

  3. 细说HTML头部标签

    细说HTML头部标签 大纲 1.头部标签列表 2.头部标签详解 <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <htm ...

  4. html的meta总结，html标签中meta属性使用介绍和   动态替换字符串

    http://www.haorooms.com/post/html_meta_ds http://www.haorooms.com/archives里面的东西比较多,需要细看一下 http://www ...

  5. html mata头部标签详解

    页头meta标签 1.meta标签特性 meta标签在网站中有很强大的功效,一个设计较好的meta标签,可以大大提高网站被搜索到的可能性,对搜索引擎优化具有至关重要的作用.以下是meta标签的特性: ...

  6. 移动端html头部meta标签的含义

    <!-- 页面将以原始大小显示,不允许缩放 --> <meta name="viewport" content="width=device-width, ...

  7. 移动端布局三种视口_移动端适配之视口和meta标签

    这是关于移动端适配的第一篇文章,这篇文章主要介绍视口以及和视口有关的meta标签的使用. 不管三七二十一,我们先新建一个页面: 这不是一个demo *{margin: 0; padding: 0;} ...

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

    <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...

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

    <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --><html lang="zh-cmn-Hans"> ...

  10. HTMl综合各大网站谈谈Meta标签和meta property=og标签含义

    看看国内一些网站头部meta的设置: 1.天猫首页 <meta charset="utf-8"/> <meta name="renderer" ...

最新文章

  1. blast程序 介绍 简介
  2. android 5.0 ios 8,iOS 8与Android 5.0大比拼：功能相同 体验不同
  3. php 其他格式数据与数组互转
  4. 【Xamarin开发 Android 系列 5】 Xamarin 的破解
  5. 前端学习（3343）：ant design中导航使用
  6. html新增伪类,css3新增伪类有哪些
  7. 安卓系统通过陀螺仪计算当前坐标(焦点位置)
  8. 收藏 | 计算机视觉四大基本任务(分类、定位、检测、分割)
  9. IntentService简介
  10. python计算正方形、立方体、圆、球的面积和体积
  11. C#　BackgroundWorker的用法
  12. 企业高薪招人，近5成岗位月薪过万
  13. android p cts camera测试 android.hardware.camera2.cts.CaptureRequestTest#testEdgeModeControl fail
  14. matlab 求公切线方程,【原创】绘制两圆公切线MATLAB代码
  15. mate7 android 6 root权限管理,华为Mate7 Root权限怎么获取 华为Mate7 Root权限获取教程【详解】...
  16. Win8下装XP双系统
  17. Linux deepin 安装mysql
  18. 基于layui的动态添加条件查询ui插件
  19. 朱兰的质量三部曲——《可以量化的管…
  20. 年薪20-50万 | 艾视维科技“3D视觉算法工程师”岗位招人啦！

热门文章

  1. h5 img js 点击图片放大_jquery – HTML5 Canvas调整图像点击放大
  2. javascript基础之拖拽（1）（详细篇）--dataTransfer对象
  3. Linux 命令之 tar 备份与解压缩
  4. java.lang.Runtime 运行时类 执行 dos 、cmd 命令、VBS 脚本
  5. java 线程 寄存器 地址_Java高级进阶多线程学习之路（四）CPU与内存
  6. java 图片线条_JAVA 关于JFrame的问题，我的图片会被线条给覆盖住，怎样让图片在上面呢...
  7. 阶段3 3.SpringMVC·_03.SpringMVC常用注解_4 HiddentHttpMethodFilter过滤器
  8. 阶段3 1.Mybatis_12.Mybatis注解开发_8 mybatis注解开发使用二级缓存
  9. ucore 地址映射的几个阶段
  10. ffmpeg格式转换命令