Home  >  Article  >  Web Front-end  >  Meta tags and their functions in H5

Meta tags and their functions in H5

小云云
小云云Original
2018-03-02 10:50:101901browse

This article mainly shares with you the meta tags and functions in H5, hoping to help everyone.

    <!DOCTYPE html>  H5标准声明,使用 HTML5 doctype,不区分大小写

    <head lang=”en”> // 标准的 lang 属性写法

    <meta charset="utf-8">    // 声明文档使用的字符编码

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>   // 优先使用 IE 最新版本和 Chrome

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

    <meta name=”keywords” content=””/>     //  页面关键词

    <meta name=”author” content=”name, email@gmail.com”/>    // 网页作者

    <meta name=”robots” content=”index,follow”/>      // 搜索引擎抓取

    <meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> // 为移动设备添加 viewport

    <meta name=”apple-mobile-web-app-title” content=”标题”> // iOS 设备 begin

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

    // 是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏

    <meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>

    // 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)

    <meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>

    <meta name=”format-detection” content=”telphone=no, email=no”/>  // 设置苹果工具栏颜色

    <meta name=”renderer” content=”webkit”>  // 启用360浏览器的极速模式(webkit)

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>     // 避免IE使用兼容模式

    <meta http-equiv=”Cache-Control” content=”no-siteapp” />    // 不让百度转码

    <meta name=”HandheldFriendly” content=”true”>     // 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓

    <meta name=”MobileOptimized” content=”320″>  //  微软的老式浏览器

    <meta name=”screen-orientation” content=”portrait”>  //  uc强制竖屏

    <meta name=”x5-orientation” content=”portrait”>   //  QQ强制竖屏

    <meta name=”full-screen” content=”yes”>           //   UC强制全屏

    <meta name=”x5-fullscreen” content=”true”>       // QQ强制全屏

    <meta name=”browsermode” content=”application”>   // UC应用模式

    <meta name=”x5-page-mode” content=”app”>    // QQ应用模式

    <meta name=”msapplication-tap-highlight” content=”no”>    // windows phone 点击无高光

    // 设置页面不缓存

    <meta http-equiv=”pragma” content=”no-cache”>

    <meta http-equiv=”cache-control” content=”no-cache”>

    <meta http-equiv=”expires” content=”0″>

Related recommendations:

Detailed explanation of meta tags and usage in html

How to implement viewport control in meta tags Device screen css attributes

Introduction to common usage of HTML meta tags

The above is the detailed content of Meta tags and their functions in H5. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn