网页meta标签总结
文章摘抄自网络。
参考文章：http://www.cnblogs.com/lpt1229/p/5628631.html
http://blog.csdn.net/aiolos1111/article/details/51754917
http://www.tuicool.com/articles/A7j2QjF
http://www.cnblogs.com/lovesong/p/5745893.html
<!DOCTYPE html>
<!-- 使用 HTML5 doctype，不区分大小写 -->
<html lang="zh-cmn-Hans">
<!--更加标准的 lang 属性写法, zh-CN已经不在支持 http://zhi.hu/XyIa --> <head>
<meta charset="utf-8">
<!-- 启用360浏览器的极速模式(webkit)
360 使用Google Chrome Frame ,360 浏览器就会在读取到这个标签后，立即切换对应的极速核。 另外为了保险起见再加入优先使用IE最新版本和Chrome,这样写可以达到的效果是如果安装了 Google Chrome Frame，则使用 GCF 来渲染页面，如果没有安装 GCF，则使用最高版本的 IE 内核进行渲染-->
<meta name="renderer" content="webkit">
<!-- 优先使用IE最新版本和Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 页面关键词 -->
<meta name="keywords" content="your keywords" />
<!-- 页面描述内容 description -->
<meta name="description" content="your description" />
<!-- 为移动设备添加viewport,viewport可以让布局在移动浏览器上显示的更好.
注：width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边的bug.
content 参数：
width viewport 宽度(数值/device-width)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)
-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximu-scale=1.0,minimum-scale=1.0,user-scalable=no">
<!-- 如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。
<meta name="viewport" content="width=device-width,user-scalable=yes">
-->
<!-- 禁止百度转码:
通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，非常之恶心。可以通过这个meta标签来禁止它： -->
<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-screen" content="true">
<!-- QQ强制全屏 -->
<meta name="x5-screen" 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 -->
<!-- -------- -->
<!-- 添加到主屏后的标题 (IOS6 新增) -->
<meta name="apple-mobile-web-app-title" content="标题内容">
<!-- 启用WebApp全屏模式(IOS)，当网站添加到主屏幕后再点击进行启动时，可删除苹果默认的状态栏和菜单栏(从浏览器跳转或输入链接进入时没有效果) -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<!--有人反应这句没有效果，本人还未测试-->
<!-- 设置苹果状态栏颜色 ，只有在apple-mobile-web-app-capable" content="yes"时生效
content的值：
default:状态栏背景为白色
black:状态栏背景为黑色
black-translucent：状态栏背景为半透明，如果设置为default或black，网页内容从状态栏底部开始。如果设置为black-translucent,网页内容充满整个屏幕，顶部会被状态栏遮挡
-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 添加智能App广告条 Smart App Banner (IOS 6+ Safari) -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID,affiliate-data=myAffiliateData,app-argument=myURL">
<!-- 在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：
7位数字，形如：1234567
带括号及加号的数字，形如：(+86)123456789
双连接线的数字，形如：00-00-00111
11位数字，形如：13800138000
可能还有其他类型的数字也会被识别。
可以通过如下的meta来关闭电话号码的自动识别 -->
<meta name="format-detection" content="telephone=no">
<!-- 移动端邮箱识别（Android）
在安卓上会对符合邮箱格式的字符串进行识别，可以通过如下的meta来关闭邮箱的自动识别：
-->
<meta name="format-detection" content="email=no">
<!-- -------- -->
<!-- IOS设备 end-->
<!-- -------- -->
<!-- -------- -->
<!-- IOS图标 begin -->
<!-- -------- -->
<!-- 添加到主屏后的APP图标 指定web app添加到主屏后的图标路径，有两种略微不同的方式：
apple-touch-icon：在IOS6及以下的版本会自动将图片自动处理成圆角和高光等效果（IOS7开始已使用扁平化的设计风格）
apple-touch-icon-precomposed：禁止系统自动添加效果，直接显示设计原图。 iPhone 和 iTouch，默认 57×57 像素，必须有！
理论上需要指定size属性来为不同的设备提供不同的图标，但通常来说，我们只需提供一个114 x 114 pixels大小的图标即可
-->
<!-- 设计原图 -->
<!-- iPhone 和 iTouch，默认 57×57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" href="short_cut_57x57.png">
<!-- iPad，72×72 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="short_cut_72x72.png">
<!-- Retina iPhone 和 Retina iTouch，114×114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="short_cut_114x114.png">
<!-- Retina iPad，144×144 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="short_cut_114x114.png">
<!-- IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120×120。 适配iPhone 6 plus，则需要在中加上这段-->
<link rel="apple-touch-icon-precomposed" sizes="180×180" href="retinahd_icon.png">
<!-- 添加高光效果， -->
<link rel="apple-touch-icon" href="short_cut_114x114.png">
<!-- -------- -->
<!-- IOS图标 end -->
<!-- -------- -->
<!-- -------- -->
<!-- IOS Web app启动动画 begin -->
<!-- -------- -->
<!-- IOS Web app启动动画
由于iPad 的启动画面是不包括状态栏区域的。所以启动图片需要减去状态栏区域所对应的方向上的20px大小，相应地在retina设备上要减去40px的大小（landscape：横屏 | portrait：竖屏）
但iPhone 和 iPod touch 的启动画面是包含状态栏区域的。
-->
<!-- iPad 竖屏 768 x 1004（标准分辨率） -->
<link href="apple-touch-startup-image-768x1004.png" sizes="768x1004" media="(device-width:768px) and (orientation:portrait)" rel="apple-touch-startup-image">
<!-- iPad 竖屏 1536×2008（Retina） -->
<link href="apple-touch-startup-image-1536x2008.png" sizes="1536x2008" media="(device-width:1536px) and (orientation:portrait) and (-webkit-device-pixel-ratio:2)" rel="apple-touch-startup-image">
<!-- iPad 横屏 1024×748（标准分辨率） -->
<link href="apple-touch-startup-image-1024x748.png" sizes="1024x748" media="(device-width:768px) and (orientation:landscape)" rel="apple-touch-startup-image">
<!-- iPad 横屏 2048×1496（Retina） -->
<link href="apple-touch-startup-image-2048x1496.png" sizes="2048x1496" media="(device-width:1536px) and (orientation:landscape) and (-webkit-device-pixel-ratio:2)" rel="apple-touch-startup-image">
<!-- iPhone/iPod Touch 竖屏 320×480 (标准分辨率) -->
<link href="apple-touch-startup-image-320x480.png" media="(device-width:320px)" rel="apple-touch-startup-image">
<!-- iPhone/iPod Touch 竖屏 640×960 (Retina) -->
<link href="apple-touch-startup-image-640x960.png" sizes="640×960" media="(device-width:320px) and (-webkit-device-pixel-ratio:2)" rel="apple-touch-startup-image">
<!-- iPhone 5/iPod Touch 5 竖屏 640×1136 (Retina) -->
<link href="apple-touch-startup-image-640x1136.png" sizes="640×1136" media="(device-width:320px) and (-webkit-device-pixel-ratio:2)" rel="apple-touch-startup-image">
<!-- iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 ！-->
<link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)">
<link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)">
<!-- IOS Web app启动动画 end -->
<!-- --------------------- -->
<!-- 下面三个是清除缓存 微信浏览器缓存严重又无刷新；这个方法调试的时候很方便 -->
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<!-- 移动端样式 -->
<style>
/*移动端定义字体的代码*/ body {
font-family: Helvetica
}
</style>
</head> <body>
<div>
参考来源：
</div>
<p>开启电话功能
<a href="tel:123456">123456</a>
</p>
<p>开启短信功能
<a href="sms:123456">123456</a>
</p>
<p>开启长按邮箱地址弹出邮件发送的功能
<a href="mailto:d@gmail.com">d@gmail.com</a>
</p>
</body> </html>
网页meta标签总结的更多相关文章
- 浅析网页meta标签中X-UA-Compatible属性的使用
今天有一个做开发的朋友突然问你知道很多网站上面加入的X-UA-Compatible属性的意义么?其实这个在以前还专门花了一点时间来验证我自己的想法,结果也确实如自己所预想的那样,八九不离十,当然有一点 ...
- meta标签中设置以极速模式打开网页
1.网页meta标签中X-UA-Compatible属性的使用的极速模式 <meta http-equiv="X-UA-Compatible" content="I ...
- html meta标签之http-equiv
摘要:HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容.常用的HTTP-EQUIV类型有:Content-Type.Refresh .Expi ...
- 基础复习之HTML （meta标签、块级元素与行内元素）
一.meta标签 SEO 如何在不使用JS的情况下刷新页面(http-equiv="refresh" , content="time") 设置页面缓存 移动端设 ...
- 转载：手机网页制作的认识（有关meta标签）
下面是手机网页的一些认识: 一.<meta name="viewport" id="viewport" content="width=devic ...
- 网页设计：Meta标签详解
很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅 ...
- Meta标签实现阻止移动设备(手机、Pad)的浏览器双击放大网页
一.背景 在当今这个移动设备发展越来越快,并且技术越来越成熟的时代,移动设备成了企业扩展业务不可或缺的重要领域之一,随之而来的是适应手机的网站层出不穷,在开发过程中,我们往往会遇到一个很尴尬的问题:移 ...
- 手机网页制作教程META标签你知道多少？【转+加】
一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equ ...
- META标签之关键词、网页描述设置帮助SEO网站优化(转)
ASP.NET 4.0 Web Forms针对SEO改进措施中有一个是在Page类中加了2个新属性:MetaKeywords 和MetaDescription,它们使得在后台代码类中用编程的手法设 ...
随机推荐
- MySQL索引1
索引最大作用就是提高对表中数据的查询速度,就像书的目录那样重要,可以快速查到所需的知识. 上面是11万多条数据的表,使用语句查询,如: 耗时:0.108s 再比如: 用时:0.004s 接下来创建索引 ...
- Windows 8 快捷键
三月份,Kurt Walter 在 Windows团队博客中发表了一篇介绍 Windows 8 和全新快捷键的精彩文章. Windows 8 提供了出色的触摸体验,但在我的台式机上使用了几个月后我还发 ...
- python---统计列表中数字出现的次数
import collections a = [1,2,3,1,2,3,4,1,2,5,4,6,7,7,8,9,6,2,23,4,2,1,5,6,7,8,2] b = collections.Coun ...
- Chome——扩展程序，获取更多扩展程序报错
修改/替换hosts文件 地址:c:/windows/system32/drivers/etc hosts:可从网上搜索下载或网盘下载(链接: http://pan.baidu.com/s/1bpu6 ...
- < 软件工程 第一次作业 >
自我介绍: 老师好! 我叫李智强,专业是计算机科学与技术,我自己也喜欢这个专业,然后这是我第一次用博客写自我介绍,可能会写的有点不好,还请包涵. 课程期望和目标: 第一次上课,听着老师说我们可能会做很 ...
- 2017 ACM-ICPC（乌鲁木齐赛区）网络赛 H.Skiing 拓扑排序＋最长路
H.Skiing In this winter holiday, Bob has a plan for skiing at the mountain resort. This ski resort h ...
- c# List集合中First、Last、Single方法使用
操作符 如果源序列是空的 源序列只包含一个元素 源序列包含多个元素 First 抛异常 返回该元素 返回第一个元素 FirstOrDefault 返回default(TSource) 返回该元素 返回 ...
- 大数的加法函数--c语言
浏览网站http://paste.ubuntu.com/23687758/ #include<stdio.h> #include<stdlib.h> #include<s ...
- 【DDD】领域驱动设计实践 —— 业务建模实例（‘发布帖子’）
本文是基于上一篇‘业务建模小招数’的实践,后面的多篇博文类似.本文主要讲解‘发表帖子’场景的业务建模,包括:业务建模.业务模型.示例代码:示例代码会使用java编写,文末附有github地址.相比于& ...
- 使用 LVS 实现负载均衡原理及安装配置详解
负载均衡集群是 load balance 集群的简写,翻译成中文就是负载均衡集群.常用的负载均衡开源软件有nginx.lvs.haproxy,商业的硬件负载均衡设备F5.Netscale.这里主要是学 ...