码迷,mamicode.com
首页 > Web开发 > 详细

网页meta标签总结

时间:2017-03-24 10:33:32      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:系统   pod   status   不同的   设计   代码   set   cat   stat   

文章摘抄自网络。

参考文章: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标签总结

标签:系统   pod   status   不同的   设计   代码   set   cat   stat   

原文地址:http://www.cnblogs.com/xinggood/p/6610008.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!