整理一些平时常用的,方便查阅

<!-- 字体编码 -->
<meta charset="utf-8" /> <!-- 关键字 -->
<meta name="keywords" content="" /> <!-- 说明 -->
<meta name="description" content="" /> <!-- 作者 -->
<meta name="author" content="" /> <!-- 设置文档宽度、是否缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" /> <!-- 优先使用IE最新版本或chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 360读取到这个标签立即钱换到极速模式 -->
<meta name="renderer" content="webkit" /> <!-- 禁止百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- UC强制竖屏 -->
<meta name="screen-orientation" content="portrait" /> <!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait" /> <!-- UC强制全屏 -->
<meta name="full-scerrn" content="yes" /> <!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="ture" /> <!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app" /> <!-- UC应用模式 -->
<meta name="browsermode" content="application"> <!-- window phone 点亮无高光 -->
<meta name="msapplication-tap-highlight" content="no" /> <!-- 安卓设备不自动识别邮件地址 -->
<meta name="format-detection" name="email=no" /> <!-- iOS设备 --> <!-- 添加到主屏幕的标题 -->
<meta name="apple-mobile-web-app-title" content="标题" /> <!-- 是否启用webApp全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 设置状态栏的背景颜色,启用webapp模式时生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent/black/default" />
<!-- 半透明/黑色/默认白色 --> <!-- 禁止数字识别为电话号码 -->
<meta name="format-detection" content="telephone=no" /> <!-- 智能添加广告条 -->
<meta name="apple-itunes-app" content="app-id=myappstoreID,affiliate-data=myaffiliatedata,app-argument=myurl" />

移动设备使用添加 viewport

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

content 参数:

  • width viewport 宽度(数值/device-width)
  • height viewport 高度(数值/device-height)
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no)
  • minimal-ui iOS 7.1 beta 2 中新增属性(注意:iOS8 中已经删除),可以在页面加载时最小化上下状态栏。这是一个布尔值,可以直接这样写:
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

而如果你的网站不是响应式的,请不要使用 initial-scale 或者禁用缩放。

<meta name="viewport" content="width=device-width,user-scalable=yes">

适配 iPhone 6 和 iPhone 6plus 则需要写:

<meta name="viewport" content="width=375">
<meta name="viewport" content="width=414">

大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px,iPhone 6 上却是 375px,大部分 5.5 寸安卓机器(比如说三星 Note)的 viewport 宽为 400,iPhone 6 plus 上是 414px。

更多关于头部标签<head>里的内容请查看这位http://www.cnblogs.com/xiuhongbin/p/meta.html的博客

HTML5头部标签中<meta>常用信息的更多相关文章

  1. webkit,HTML5头部标签

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

  2. html的meta总结,html标签中meta属性使用介绍(转)

    html的meta总结,html标签中meta属性使用介绍 2014年11月5日 5928次浏览 引子 之前的我的博客中对于meta有个介绍,例如:http://www.haorooms.com/po ...

  3. HTML5头部标签备忘

    DOCTYPE DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于html 标签之前,此标签告知浏览器文档使用哪种HTML 或者XHTML 规范. 推荐使用HTML5 推 ...

  4. html的meta总结,html标签中meta属性使用介绍

    引用:http://www.haorooms.com/post/html_meta_ds 前言 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta ...

  5. html标签中meta属性使用介绍

    前言 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用 ...

  6. HTML 常用头部标签(meta)

    先来看下常用的标签列表,后文会一一介绍: <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang=&quo ...

  7. HTML5 头部标签定义

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

  8. 移动端的头部标签和meta

    <!DOCTYPE html><!--HTML5 doctype--> <html> <head> <title>xxx</title ...

  9. 移动端的头部标签和 meta

    使用 HTML5 doctype,不区分大小写 <!DOCTYPE html> 更加标准的 lang 属性写法 http://zhi.hu/XyIa <html lang=" ...

随机推荐

  1. 微信第三方登录(原生)demo

    在一家ecstore二开公司有一段时间了,公司希望往自己研发产品上面走,一直在培养新人.   最近要自己去微信登录,自己就在ectore的框架基础上,写的原生微信第三方登录以此来熟悉微信第三方登录,在 ...

  2. 给sftp创建新用户、默认打开和限制在某个目录

    一.环境: CentOS 6.8 使用 FileZilla 进行 sftp 连接 二.背景 给外包的工作人员提供我司服务器的某一目录的访问(包括读写)权限,方便他们部署代码文件. 之所以是某一目录的访 ...

  3. int 与 int *

    #include <iostream>using namespace std;int QKPass(int* , int , int);  //若声明为 int QKPass(int, i ...

  4. 论如何把JS踩在脚下 —— JQuery基础及Ajax请求详解

    一.什么是JQuery? JQuery是一种JavaScript框架,是一堆大神搞出来的能够让前端程序猿敲更少代码.实现更多功能的工具(在此,跪谢各位JQuery开发大大们!!!).JQuery的使用 ...

  5. 使用DotNetty编写跨平台网络通信程序

    长久以来,.Net开发人员都非常羡慕Java有Netty这样,高效,稳定又易用的网络通信基础框架.终于微软的Azure团队,使用C#实现的Netty的版本发布.不但使用了C#和.Net平台的技术特点, ...

  6. javaSE_06Java中的数组(array)-练习

    (1),数组的两种遍历方式,顺序查找,二分查找,求最大最小数,冒泡排序,选择排序. public class Test1{ public static void main(String[] args) ...

  7. 初识Java(2) 变量与数据类型

    一. 变量 1.变量是内存中的一个标识符号,用于存储数据 2.变量命名规则 1)  必须以字母.下划线 _ .美元符号 $ 开头 2) 变量中,可以包括数字 3) 变量中,不能出现特殊的符号,空格 4 ...

  8. Docker化tomcat 并且使用maven热部署

    今天没事干 就把自己的tomcat  docker化并且使用maven实现热部署 特别记录一下~ 1.首先进行centos7的安装 就不在记录了 注意的是最好使用centos7 因为docker 依赖 ...

  9. Spring学习(21)--- AOP之Advice应用(上)

    前置通知(Before advice) 在某个连接点(join point)之前执行的通知,但不能阻止连接点前的执行(除非它抛出异常) 返回后通知(After returning advice) 在某 ...

  10. grunt中常见的插件

    /** * 需要用到的文件夹有 js(src) css image html */ gulp是一种自动化构建工具,可以增强我们的工作流程,他是基于 Node.js 构建的,与gruntjs相比,gul ...