1. ホーム
  2. Web制作
  3. HTML/Xhtml

HTML共通メタブック(推奨)

2022-01-07 06:50:10

Metaタグは、HTML言語のhead領域にある補助タグで、HTML文書のheadタグとtitleタグの間に位置し、ユーザーからは見えない情報を提供します。
Meta : すなわち、メタデータはデータのデータ情報である。

メタデータは、ブラウザ(コンテンツの表示方法やページの再読み込み)、検索エンジン(キーワード)、その他のウェブサービスを使用して呼び出すことができます。

俗に言う、単体では役に立たないが、他の属性によって一定の効果が設定されると活躍するタグのことを、quot; metadata"と呼んでいるのである。

<! -- Define the character encoding of the document -->
<meta charset="utf-8" /> 
<! -- enforces Chromium kernel, works on 360 browser, QQ browser and other domestic dual-core browsers -->
<meta name="renderer" content="webkit"/>
<! -- Forces Chromium kernel, works on other dual-core browsers -->
<meta name="force-rendering" content="webkit"/>
<! -- Force Chromium kernel if Google Chrome Frame plugin is installed, otherwise force the highest version of locally supported IE kernel that works with Internet Explorer -- >
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<! -- 
    Set the size of the viewport
    width sets the width of the layout viewport as a positive integer, or the string "width-device"
    initial-scale sets the initial scale of the page, as a number, possibly with decimals
    minimum-scale allows the user's minimum scale, as a number, can be fractional
    maximum-scale allows the user's maximum scale, as a number, can be fractional
    shrink-to-fit=no IOS9 requires this for the previous attributes to work
    height sets the height of the layout viewport, this property is not important to us and is rarely used
    user-scalable whether to allow the user to zoom, the value is "no" or "yes", no means not allowed, yes means allowed
-->
<meta name="viewport" content="width=device-width, initial-scale-1.0, shrink-to-fit=no, minimum-scale-1.0, maximum- scale=1.0, user-scalable=no"/>
<! -- Page description -->
<meta name="description" content="No more than 150 characters"/>
<! -- page keywords -->
<meta name="keywords" content=""/>
<! -- page author -->
<meta name="author" content="name, [email protected]"/>
<! -- 
    Search engine crawl
    all: the document will be retrieved and the links on the page can be queried. 
    none: the file will not be retrieved and the links on the page may not be queried.
    index: the document will be retrieved. 
    follow: the links on the page can be queried. 
    noindex: the document will not be retrieved. 
    nofollow: the links on the page will not be available for query. 
-->
<meta name="robots" content="index,follow"/>
<! -- ignore numbers in pages identified as phone, ignore email identification -- >
<meta name="format-detection" content="telphone=no, email=no"/>

<! -- IOS begin -->
<! -- Title after adding to home screen (new in iOS 6) -->
<meta name="apple-mobile-web-app-title" content="title">
<! -- When the site is added to the home screen quick launch method, you can hide the address bar, only for ios safari (after ios version 7.0, the effect is no longer visible on safari) -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<! -- Whether to enable WebApp full-screen mode and remove Apple's default toolbar and menu bar -->
<meta name="apple-touch-fullscreen" content="yes"/>
<! -- Add Smart App Banner Smart App Banner (iOS 6+ Safari) -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" >
<! -- Set Apple toolbar color: default is default (white), can be black (black) and black-translucent (gray translucent) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<! -- not let Baidu transcode -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<! -- Optimized for handheld devices, mainly for older browsers that don't recognize viewport, like Blackberry -->
<meta name="HandheldFriendly" content="true">
<! -- Microsoft's old browser -- >
<meta name="MobileOptimized" content="320">
<! -- uc force vertical screen -->
<meta name="screen-orientation" content="portrait">
<! -- QQ forced vertical screen -->
<meta name="x5-orientation" content="portrait">
<! -- UC forced fullscreen -->
<meta name="full-screen" content="yes">
<! -- QQ force full screen -->
<meta name="x5-fullscreen" content="true">
<! -- UC application mode -->
<meta name="browsermode" content="application">
<! -- QQ application mode -->
<meta name="x5-page-mode" content="app">
<! -- windows phone click no highlight -->
<meta name="msapplication-tap-highlight" content="no">

<! -- 
    iOS icons begin 
    Icon when the site is added to the ios desktop
-->
<! -- iPhone and iTouch, default 57x57 pixels, must have -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="table_ico57.png">
<! -- Retina iPhone and Retina iTouch, 114x114 pixels, can be absent, but recommended -- >
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="table_ico72.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="table_ico114.png">
<! -- Retina iPad, 144x144 pixels, can be absent, but recommended -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="table_ico144.png">

<! -- iOS startup screen begin -->
<! -- iPad vertical screen 768 x 1004 (standard resolution) -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
<! -- iPad landscape 1024x748 (standard resolution) -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
<! -- iPad Portrait 1536x2008 (Retina) -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href=&qTest code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <script>/*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+ encodeURIComponent(window.location.href); @*/</script>
  </head>
  <body>
        <h1>Hello world</h1>
  </body>
</html>


IE 11 will output normally

IE 10 will see the following page

Reference

Front-end Meta Usage Summary - MR_LIXP

Force browser to use WebKit kernel speed mode via meta code (fixes meta name="renderer" content="webkit" not working) - [AiHuanHuan]

Meta settings for mobile web pages - 恬雅过客

The above is all the content of this article, I hope it will help you to learn, and I hope you will support the script house more.