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

<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->

<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-touch-fullscreen" content="yes">：

    <!-- "添加到主屏幕“后，全屏显示 -->

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

    <meta name="imagemode" content="force">

    <!-- 强制图片显示  。 UC浏览器为了节省流量，为用户提供了无图模式，但是如果页面的图片是必不可少的，如验证码的，需要强制浏览器显示图片，可以设置imagemode， 不影响子页面。通过META设置图片加载方式会作用于整个页面，如果希望对单个图片进行设置，那么可以使用这个 -->

    <meta name="nightmode" content="disable">

     <!-- 夜间模式。nightmode的值设置为disable后，即使用户使用浏览器的夜间模式，页面的表现也仍然是非夜间模式。 -->

    <meta name="browsermode" content="application">

     <!-- 使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。 -->

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

     <!-- winphone系统a、input标签被点击时产生的半透明灰色背景去掉 -->

    <title>标题</title>

</head>

另外，建议X-UA这样写

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

更多：https://www.cnblogs.com/supershare/p/5709846.html

移动端网站开发要点-meta设置的更多相关文章

  1. 手机移动端网站开发流程HTML5

    手机移动端网站开发流程HTML5 最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难.为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗? ...

  2. WebApp触屏版网站开发要点

    所谓的触屏版网站其实也是WebApp的一种展示形式,主要是依赖HTML+CSS+Javascript这三个关键因素来实现,相比较原生客户端程序来说优点就是开发周期短.升级简单.维护成本低,因为从根本上 ...

  3. 移动开发常用meta设置

    <!-- 视图窗口,移动端特属的标签. --> <meta name="viewport" content="width=device-width,in ...

  4. 移动开发webapp开发常用meta设置手机浏览器全屏模式

    1.WebApp全屏模式: <meta name="viewport" content="width=device-width,initial-scale=1.0, ...

  5. 触摸屏网站开发系列（一）-ios web App应用程序（ios meta）

    触摸屏网站的开发其实现在来讲比前几年移动端网站开发好多了,触摸屏设备IOS.Android.BBOS6等系统自带浏览器均为WEBKIT核心,这就说明PC上面尚未立行的HTML5 CSS3能够运用在这里 ...

  6. 移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签)

    移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签) 一.总结 一句话总结: 添加viewport标签:meta name="viewport" ...

  7. meta设置与去除默认样式--移动端开发整理笔记（一）

    视口设置: <meta name="viewport" content="width=device-width,user-scalable=no,initial-s ...

  8. 浅析网站开发中的 meta 标签的作用

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  9. MVC5 网站开发之九 网站设置

    网站配置一般用来保存网站的一些设置,写在配置文件中比写在数据库中要合适一下,因为配置文件本身带有缓存,随网站启动读入缓存中,速度更快,而保存在数据库中要单独为一条记录创建一个表,结构不够清晰,而且读写 ...

随机推荐

  1. [V&N2020 公开赛] Web misc部分题解

    0x00 前言 写了一天题目,学到了好多东西, 简单记录一下 0x01 Web HappyCTFd 直接使用网上公开的cve打: 解题思路:先注册一个admin空格账号,注意这里的靶机无法访问外网,邮 ...

  2. 解决利用hibernate连接mysql时无法插入汉字的问题

    1.先修改mysql数据库的配置文件my.ini,此文件放在mysql安装文件的根目录下.找到default-character-set属性,并将其值更改为utf8(不是utf-8),将default ...

  3. 2019-2020-1 20199329 第二周测试（环境：ubuntu64位）

    2019-2020-1 20199329 第二周测试(环境:ubuntu64位) 实验一 0.每个.c一个文件,每个.h一个文件,文件名中最好有自己的学号 1.用Vi输入图中代码,并用gcc编译通过 ...

  4. Querying for Event Information

    https://docs.microsoft.com/zh-cn/windows/desktop/EventLog/querying-for-event-source-messages #includ ...

  5. opencv-8-图像核与蒙板操作

    opencv-8-图像核与蒙板操作 opencvc++qt 开始之前 在准备开始的时候, 我大概列了一个opencv 章节列表, 按照章节进行写, 写到某些部分的时候再具体调整章节内容, 完成了之后, ...

  6. OC的消息机制简单介绍

    在OC的消息机制中主要分为三个阶段,分别为: 1.消息发送阶段:从类以及父类的方法缓存列表和方法列表查找方法. 2.动态解析阶段:在消息发送阶段没有找到方法,则会进入这个阶段,负责动态添加方法实现. ...

  7. JavaScript HTMlL DOM对象（下）

    DOM:document operation model 文档操作模型 每个标签都是一个对象. 一.查找元素 DOM 回顾 直接查找 var obj = document.getElementById ...

  8. Spring Boot 静态文件，请求不到，util文件夹

    静态文件貌似对util文件夹有特殊处理static/js/test.js 可以请求到static/js/laydate/test.js 可以请求到static/js/util/test.js 请求不到

  9. 如何迅速分析出系统CPU的瓶颈在哪里？

    内容出自极客时间专栏<Linux 性能优化实战> CPU 的性能指标那么多,CPU 性能分析工具一抓一大把,换成实际的工作场景,该观察什么指标.选择哪个性能工具呢? 不要担心,今天我就以多 ...

  10. 翻译 - Kafka Streams 介绍(一)

    2019独角兽企业重金招聘Python工程师标准>>> 资料 [原文地址](http://kafka.apache.org/11/documentation/streams/) 正文 ...