HTML5头部标签中<meta>常用信息
整理一些平时常用的,方便查阅
<!-- 字体编码 -->
<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>常用信息的更多相关文章
- webkit,HTML5头部标签
大家都知道在移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来.本文整理一些HTML5头部<meta>标签常用的 ...
- html的meta总结,html标签中meta属性使用介绍(转)
html的meta总结,html标签中meta属性使用介绍 2014年11月5日 5928次浏览 引子 之前的我的博客中对于meta有个介绍,例如:http://www.haorooms.com/po ...
- HTML5头部标签备忘
DOCTYPE DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于html 标签之前,此标签告知浏览器文档使用哪种HTML 或者XHTML 规范. 推荐使用HTML5 推 ...
- html的meta总结,html标签中meta属性使用介绍
引用:http://www.haorooms.com/post/html_meta_ds 前言 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta ...
- html标签中meta属性使用介绍
前言 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用 ...
- HTML 常用头部标签(meta)
先来看下常用的标签列表,后文会一一介绍: <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang=&quo ...
- HTML5 头部标签定义
<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...
- 移动端的头部标签和meta
<!DOCTYPE html><!--HTML5 doctype--> <html> <head> <title>xxx</title ...
- 移动端的头部标签和 meta
使用 HTML5 doctype,不区分大小写 <!DOCTYPE html> 更加标准的 lang 属性写法 http://zhi.hu/XyIa <html lang=" ...
随机推荐
- Spring Mvc 用Demo去学习
1:首先大体知道 SpringMVC 框架的 运行原理(图片来自网络 ) 2:SpringMVC 是依照DispatcherServlet 展开的 这里可以约Structs2对比,structs2 是 ...
- JDFS:一款分布式文件管理实用程序第二篇(更新升级、解决一些bug)
一 前言 本文是<JDFS:一款分布式文件管理实用程序>系列博客的第二篇,在上一篇博客中,笔者向读者展示了JDFS的核心功能部分,包括:服务端与客户端部分的上传.下载功能的实现,epoll ...
- AVL树(平衡二叉查找树)
首先要说AVL树,我们就必须先说二叉查找树,先介绍二叉查找树的一些特性,然后我们再来说平衡树的一些特性,结合这些特性,然后来介绍AVL树. 一.二叉查找树 1.二叉树查找树的相关特征定义 二叉树查找树 ...
- 30多个Android 开发者工具 带你开发带你飞
文中部分工具是收费的,但是绝大多数都是免费的. FlowUp 这是一个帮助你跟踪app整体性能的工具,深入分析关键的性能数据如FPS, 内存, CPU, 磁盘, 等等.FlowUp根据用户数量收费. ...
- Unity C# GetSaveFileName()的应用
本文原创,转载请注明出处:http://www.cnblogs.com/AdvancePikachu/p/6944870.html 唉哟,这次厉害咯,网上搜罗了好久,终于被我找到汉化的保存对话框了,根 ...
- laravel中的多对多关系详解
数据表之间是纵横交叉.相互关联的,laravel的一对一,一对多比较好理解,官网介绍滴很详细了,在此我就不赘述啦,重点我记下多对多的关系 一种常见的关联关系是多对多,即表A的某条记录通过中间表C与表B ...
- GPU编程--Shared Memory(4)
GPU的内存按照所属对象大致分为三类:线程独有的.block共享的.全局共享的.细分的话,包含global, local, shared, constant, and texture memoey, ...
- [BZOJ4518]征途
4518: [Sdoi2016]征途 Time Limit: 10 Sec Memory Limit: 256 MB Description Pine开始了从S地到T地的征途. 从S地到T地的路可以 ...
- string services
string通用字符串操作: re,正则表达式 difflib,比较序列 stringIO:以文件的方式来读和写字符串 CstringIO:更快捷的stringIO版本 textwrap:文本包装和填 ...
- FullCalendar 日历插件中文说明文档
FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...