<!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. vue axios post请求下载文件，后台springmvc完整代码

     注意请求时要设置responseType,不加会中文乱码,被这个坑困扰了大半天... axios post请求:     download(index,row){         var ts =  ...

  2. SQLServer系统表使用简介(sysobjects、syscolumns、syscomments等)转载

    sysobjects:记录了数据库中每一个表.视图.约束.存储过程等详细内容的表. 表中常用的字段如下 : 列名 数据类型 描述 name sysname 对象名 id int 对象标识号 xtype ...

  3. 【一起学设计模式】观察者模式实战：真实项目中屡试不爽的瓜娃EventBus到底如何实现观察者模式的？

    申明 本文章首发自本人公众号:壹枝花算不算浪漫,如若转载请标明来源! 感兴趣的小伙伴可关注个人公众号:壹枝花算不算浪漫 22.jpg 前言 之前出过一个设计模式的系列文章,这些文章和其他讲设计模式的文 ...

  4. 最通俗易懂的Redis发布订阅及代码实战

    发布订阅简介 除了使用List实现简单的消息队列功能以外,Redis还提供了发布订阅的消息机制.在这种机制下,消息发布者向指定频道(channel)发布消息,消息订阅者可以收到指定频道的消息,同一个频 ...

  5. 架构师修炼之微服务部署 - 深入理解Docker镜像

    镜像简介 它是一个创建Docker 容器的只读模板,通过DockerFile可以自定义镜像. 它也是一个特殊的文件系统,除了提供容器运行时所需的程序.库.资源.配置等文件外,还包含了一些为运行时准备的 ...

  6. [Abp vNext 入坑分享] - 4.JWT授权的接入

    一.感想 在写这一系列文章之前,本来以为写这个之前已经搭建好的框架描述会比较简单,但是慢慢写下来才发现.写这个真的不简单额,本来以为图文一起,一个晚上应该能输出一篇吧...结果:现实真的骨感,一个星期 ...

  7. Istio架构详解

    Istio架构及其组件概述 Istio 架构总体来说分为控制面和数据面两部分.控制面是 Istio 的核心,管理 Istio 的所有功能,主要包括Pilot.Mixer.Citadel等服务组件;数据 ...

  8. T-SQL字符串函数

    整理下MSSQL中有关时间的函数,博客记录之. ASCII 原型:ASCII ( character_expression ) 返回值:int 类型值 功能:返回输入字符串最左边的一个字符的ASCII ...

  9. MAC攻击及缺陷

    MAC攻击及缺陷 MAC有好几种实现方式 对MAC的攻击 重放攻击 重放攻击的防护 密钥推测攻击 MAC算法的缺陷 第三方证明 防止否认 前面我们在讲HMAC的时候简单讲过了什么是MAC消息认证码. ...

  10. java 之 构造器 static关键字

    构造器  特点: 方法名和类名一至,没有void没有返回,无参数的称为无参构造器,有参数的称为有参构造器 语法: public 类名 {数据类型 参数名} 目的:创建对象 注意:如果类中没有带有参数的 ...