您的位置:首页 > Web前端 > 其它 > 正文

html5 meta标签

更多 时间:2015-10-11 类别:Web前端 浏览量:1495

html5 meta标签

html5 meta标签

一、viewport网页缩放

 

  • 
    <meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
       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 中新增属性,可以在页面加载时最小化上下状态栏。这是一个布尔值,可以直接这样写:
    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
    
    
    			
  •  
  •  
  • 二、声明文档使用的字符编码
  •  
  • <meta charset="utf-8" />
  •  

    三、SEO搜索引擎相关设置

     

  • 
    <meta name="description" content="不超过150个字符" /> //页面描述
    
    				

    <meta name="keywords" content="html5, css3, 关键字"/> //页面关键词

    <meta name="author" content="魔法小栈" /> //定义网页作者

    <meta name="robots" content="index,follow" /> //定义网页搜索引擎索引方式,robotterms是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex

     

  •  

    四、iOS 设备

     

  • 
    <meta name="apple-mobile-web-app-title" content="标题"> //添加到主屏后的标题(iOS 6 新增)
    
    					

    <meta name="apple-mobile-web-app-capable" content="yes" />//是否启用 WebApp 全屏模式

    <!-- 禁用自动识别电话号码 -->

    <meta name="format-detection" content="telephone=no" />

    <!-- 禁用自动识别电子邮件 -->

    <meta name="format-detection" content="email=no" />

    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />//设置状态栏的背景颜色

    只有在 "apple-mobile-web-app-capable" content="yes" 时生效

    content 参数:

    default 默认值。

    black 状态栏背景是黑色。

    black-translucent 状态栏背景是黑色半透明。

    设置为 default 或 black ,网页内容从状态栏底部开始。

    设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。

     

  • 五、Safari浏览器相关设置

     

  • 
    <!-- 强制全屏 -->
    
    <meta name="apple-mobile-web-app-capable" content="yes" />
    
    <!-- 设置状态栏颜色 -->
    
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    
    <!-- 设置添加至主屏标题 -->
    
    <meta name="apple-mobile-web-app-title" content="..." />
    			

     

  • 六、UC浏览器相关设置

     

  • 
    
    <!-- 强制竖屏 -->
    
    <meta name="screen-orientation" content="portrait" />
    
    <!-- 强制全屏 -->
    
    <meta name="full-screen" content="yes" />
    
    <!-- 应用模式 -->
    
    <meta name="browsermode" content="application" />
    
    		
  •  

    七、QQ浏览器相关设置

     

  • 
    
    <!-- 强制竖屏 -->
    
    <meta name="x5-orientation" content="portrait" />
    
    <!-- 强制全屏 -->
    
    <meta name="x5-fullscreen" content="true" />
    
    <!-- 应用模式 -->
    
    <meta name="x5-page-mode" content="app" />
    
    		
  •  

    八、360浏览器相关设置

     

  • 
    
    <!-- 启用极速模式 -->
    
    <meta name="renderer" content="webkit" />
    
    			
  •  

    九、WP手机相关设置

     

  • 
    
    <!-- 禁用点击高光效果 -->
    
    <meta name="msapplication-tap-highlight" content="no" />
    
    		
  •  

    十、Weibo社交标签相关设置

     

  • 
    
    <!-- 展示标题 -->
    
    <meta property="og:title" content="..." />
    
    <!-- 展示描述 -->
    
    <meta property="og:description" content="..." />
    
    <!-- 展示类型 -->
    
    <meta property="og:type" content="..." />
    
    <!-- 展示图片 -->
    
    <meta property="og:image" content="..." />
    
    <!-- 展示链接 -->
    
    <meta property="og:url" content="..." />
    
    		
  •  

    标签:html5
    您可能感兴趣