html meta標籤

時間 2019-11-16

標籤 html meta 標籤欄目 HTML 简体版

原文原文鏈接

　　前幾天在寫官網。這邊記錄下我有遇到的問題，下面開始了。html

　　問題：在寫響應式網站時，寫完pc端頁面，切換手機模式後，頁面同比例縮放到手機上了。web

　　　　　一樣以前也碰見過，pc端的頁面在手機上亂了，不是同比例顯示...chrome

　　以前只是隨便在網上找到解決辦法，沒有總體的去看一下這部分知識，今天特來記錄總結下關於這方面的知識。瀏覽器

瀏覽器支持

　　全部瀏覽器都支持 <meta> 標籤。緩存

定義和用法

　　<meta> 元素可提供有關頁面的元信息（meta-information），好比針對搜索引擎和更新頻度的描述和關鍵詞。服務器

　　<meta> 標籤位於文檔的頭部，不包含任何內容。<meta> 標籤的屬性定義了與文檔相關聯的名稱/值對。app

提示和備註

　　註釋：<meta> 標籤永遠位於 head 元素內部。優化

　　註釋：元數據老是以名稱/值的形式被成對傳遞的。網站

必選屬性

　　content: 定義與http-equiv或name屬性相關的元信息ui

可選屬性

- name屬性

　　　　keywords: 關鍵詞，告訴瀏覽器網頁的關鍵詞

　　　　description：描述，告訴瀏覽器網頁的內容

<meta name="keywords" content="關於meta標籤,網頁,918之初">
<meta name="description" content="HTML中<meta>標籤如何正確使用">

　　　　viewport：可視區域

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
//強制文檔與設備寬度保持1:1，文檔的比例和最大比例1.0，不可手動縮放

- http-equiv屬性

　　　　content-type:文檔內容類型，用於設定文檔類型和字符集

　　　　expires：設定網頁到期期限，一旦網頁到期，那麼必須在服務器上從新刷新而不能經過緩存獲取網頁，其中設置的時間格式爲GMT格式

<meta http-equiv="expires" content="Fri,12 Jan 2001 15:15:15 GMT">

　　　　　pragma：是否從緩存中訪問網頁內容

　　　　　refresh:刷新，等待必定時間自動刷新或者跳轉到其餘url

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="refresh" content="1; url=https://www.baidu.com"/>

使用總結

<!DOCTYPE html> 
<html lang="en">
<head>

<!-- 聲明文檔使用的字符編碼 -->
<meta charset='utf-8'>
<!-- 優先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 啓用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 頁面描述 -->
<meta name="description" content="不超過150個字符"/>
<!-- 頁面關鍵詞 -->
<meta name="keywords" content=""/>
<!-- 網頁做者 -->
<meta name="author" content="name, email@gmail.com"/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 忽略頁面中的數字識別爲電話，忽略email識別 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 強制文檔與設備寬度保持1:1，文檔的比例和最大比例1.0，不可手動縮放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，好比黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- 添加 RSS 訂閱 -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<!-- 添加 favicon icon -->

<title>標題</title>
</head>

　　其中：
　　width=device-width ：表示寬度是設備屏幕的寬度

　　initial-scale=1.0：表示初始的縮放比例

　　minimum-scale=1.0：表示最小的縮放比例

　　maximum-scale=1.0：表示最大的縮放比例

　　user-scalable=yes：表示用戶是否能夠調整縮放比例（yes,no,1,0）

　　X-UA-Compatible 是針對 IE8 版本的一個特殊文件頭標記，用於爲 IE8 指定不一樣的頁面渲染模式。因爲當下 IE6 和 IE7 使用率依然較高，綜合考慮，啓用 IE8 版本的 X-UA-Compatible 兼容模式顯得至關重要。更多兼容ie版本代碼，請看尾部連接。

　　本文參考：菜鳥教程：https://www.w3school.com.cn/tags/tag_meta.asp#meta_prop_name

　　　　　　　meta標籤：http://ife.baidu.com/note/detail/id/1525

　　　　　　　ie更多兼容：https://blog.csdn.net/weixin_30589127/article/details/84444776

相關標籤/搜索

HTML標籤