<meta>標簽

来源:http://www.cnblogs.com/margic/archive/2016/05/06/5385764.html
-Advertisement-
Play Games

1.viewport 能優化移動瀏覽器的顯示。如果不是響應式網站，不要使用initial-scale或者禁用縮放。大部分4.7-5寸設備的viewport寬設為360px；5.5寸設備設為400px；iphone6設為375px；ipone6 plus設為414px。 <meta name=”vie ...


1.viewport

能優化移動瀏覽器的顯示。如果不是響應式網站，不要使用initial-scale或者禁用縮放。
大部分4.7-5寸設備的viewport寬設為360px；5.5寸設備設為400px；iphone6設為375px；ipone6 plus設為414px。

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no″>        //表示支持響應式設計

width：控制 viewport 的大小，可以指定的一個值，如果 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動縮放（user-scalable=no//user-scalable=0,不允許用戶手動縮放）

註意：content里多個屬性的設置一定要用逗號+空格來隔開，如果不規範將不會起作用

WebApp全屏模式：偽裝app，離線應用

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

隱藏狀態欄/設置狀態欄顏色：只有在開啟WebApp全屏模式時才生效。content的值為default | black | black-translucent 

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

添加到主屏後的標題

<meta name="apple-mobile-web-app-title" content="標題">

忽略數字自動識別為電話號碼

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

忽略識別郵箱

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

添加智能 App 廣告條 Smart App Banner：告訴瀏覽器這個網站對應的app，併在頁面上顯示下載banner

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

<!-- 針對手持設備優化，主要是針對一些老的不識別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">

<!-- windows phone 點擊無高光 --> <meta name="msapplication-tap-highlight" content="no">

 

網頁相關

  • 申明編碼
<meta charset='utf-8' />
  • 優先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 關於X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
  • 瀏覽器內核控制：國內瀏覽器很多都是雙內核（webkit和Trident），webkit內核高速瀏覽，IE內核相容網頁和舊版網站。而添加meta標簽的網站可以控制瀏覽器選擇何種內核渲染。
 <meta name="renderer" content="webkit|ie-comp|ie-stand">

國內雙核瀏覽器預設內核模式如下：
1. 搜狗高速瀏覽器、QQ瀏覽器：IE內核（相容模式）
2. 360極速瀏覽器、遨游瀏覽器：Webkit內核（極速模式）

  • 禁止瀏覽器從本地電腦的緩存中訪問頁面內容：這樣設定，訪問者將無法離線瀏覽。
<meta http-equiv="Pragma" content="no-cache">
  • Windows 8
<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁貼顏色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁貼圖標 -->
  • 站點適配：主要用於PC-手機頁的對應關係。
<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
<!--
[wml|xhtml|html5]根據手機頁的協議語言，選擇其中一種；
url="url" 後者代表當前PC頁所對應的手機頁URL，兩者必須是一一對應關係。
 -->
  • 轉碼申明：用百度打開網頁可能會對其進行轉碼（比如貼廣告），避免轉碼可添加如下meta
<meta http-equiv="Cache-Control" content="no-siteapp" />

2.Content-Type和Content-Language (顯示字元集的設定)


　　說明：設定頁面使用的字元集，用以說明主頁製作所使用的文字已經語言，瀏覽器會根據此來調用相應的字元集顯示page內容。


　　用法：<Meta http-equiv="Content-Type" Content="text/html; Charset=gb2312">
　　　　　　<Meta http-equiv="Content-Language" Content="zh-CN">


　　註意：　該META標簽定義了HTML頁面所使用的字元集為GB2132，就是國標漢字碼。如果將其中的“charset=GB2312”替換成“BIG5”，則該頁面所用的字元集就是繁體中文Big5碼。當你瀏覽一些國外的站點時，IE瀏覽器會提示你要正確顯示該頁面需要下載xx語支持。這個功能就是通過讀取HTML頁面META標簽的Content-Type屬性而得知需要使用哪種字元集顯示該頁面的。如果系統里沒有裝相應的字元集，則IE就提示下載。其他的語言也對應不同的charset，比如日文的字元集是“iso-2022-jp ”，韓文的是“ks_c_5601”。
　　　　　　
　　Content-Type的Content還可以是：text/xml等文檔類型；
　　Charset選項：ISO-8859-1(英文)、BIG5、UTF-8、SHIFT-Jis、Euc、Koi8-2、us-ascii, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp,euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1,x-cns11643-2等字元集；Content-Language的Content還可以是：EN、FR等語言代碼。


　　3、Refresh (刷新)


　　　說明：讓網頁多長時間（秒）刷新自己，或在多長時間後讓網頁自動鏈接到其它網頁。
　　　用法：<Meta http-equiv="Refresh" Content="30">
　　　　　　<Meta http-equiv="Refresh" Content="5; Url=http://www.xia8.net">
　　　註意：其中的5是指停留5秒鐘後自動刷新到URL網址。


　　4、Expires (期限)


　　　說明：指定網頁在緩存中的過期時間，一旦網頁過期，必須到伺服器上重新調閱。
　　　用法：<Meta http-equiv="Expires" Content="0">
　　　　　　<Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT">
　　　註意：必須使用GMT的時間格式，或直接設為0(數字表示多少時間後過期)。


　　5、Pragma (cach模式)


　　　說明：禁止瀏覽器從本地機的緩存中調閱頁面內容。
　　　用法：<Meta http-equiv="Pragma" Content="No-cach">
　　　註意：網頁不保存在緩存中，每次訪問都刷新頁面。這樣設定，訪問者將無法離線瀏覽。


　　6、Set-Cookie (cookie設定)


　　說明：瀏覽器訪問某個頁面時會將它存在緩存中，下次再次訪問時就可從緩存中讀取，以提高速度。當你希望訪問者每次都刷新你廣告的圖標，或每次都刷新你的計數器，就要禁用緩存了。通常HTML文件沒有必要禁用緩存，對於ASP等頁面，就可以使用禁用緩存，因為每次看到的頁面都是在伺服器動態生成的，緩存就失去意義。如果網頁過期，那麼存檔的cookie將被刪除。
　　　用法：<Meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,
　　　　　　 21-Oct-98 16:14:21 GMT; path=/">
　　　註意：必須使用GMT的時間格式。


　　7、Window-target (顯示視窗的設定)


　　　說明：強制頁面在當前視窗以獨立頁面顯示。
　　　用法：<Meta http-equiv="Widow-target" Content="_top">
　　　註意：這個屬性是用來防止別人在框架里調用你的頁面。Content選項：_blank、_top、_self、_parent。


　　8、Pics-label (網頁RSAC等級評定)
　　　說明：在IE的Internet選項中有一項內容設置，可以防止瀏覽一些受限制的網站，而網站的限制級
　　　　　　別就是通過該參數來設置的。
　　　用法：<META http-equiv="Pics-label" Contect=
　　　　　　　　　　　　　　　"(PICS－1.1'http://www.rsac.org/ratingsv01.html'
　　　　　　 I gen comment 'RSACi North America Sever' by '[email protected]' 
　　　　　　　for 'http://www.microsoft.com' on '1997.06.30T14:21－0500' r(n0 s0 v0 l0))">


　　　註意：不要將級別設置的太高。RSAC的評估系統提供了一種用來評價Web站點內容的標準。用戶可以設置Microsoft Internet Explorer（IE3.0以上）來排除包含有色情和暴力內容的站點。上面這個例子中的HTML取自Microsoft的主頁。代碼中的（n 0 s 0 v 0 l 0）表示該站點不包含不健康內容。級別的評定是由RSAC，即美國娛樂委員會的評級機構評定的，如果你想進一步瞭解RSAC評估系統的等級內容，或者你需要評價自己的網站，可以訪問RSAC的站點：http://www.rsac.org/。


　　9、Page-Enter、Page-Exit (進入與退出)


　　　說明：這個是頁面被載入和調出時的一些特效。
　　　用法：<Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)">
　　　　　　<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">
　　　註意：blendTrans是動態濾鏡的一種，產生漸隱效果。另一種動態濾鏡RevealTrans也可以用於頁面進入與退出效果:


　　　　　　<Meta http-equiv="Page-Enter" Content="revealTrans(duration=x, transition=y)">
　　　　　　<Meta http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)">


　　　　　　　Duration　　表示濾鏡特效的持續時間(單位：秒)
　　　　　　　Transition　濾鏡類型。表示使用哪種特效，取值為0-23。


　　　　　　　0 矩形縮小
　　　　　　　1 矩形擴大
　　　　　　　2 圓形縮小
　　　　　　　3 圓形擴大
　　　　　　　4 下到上刷新
　　　　　　　5 上到下刷新
　　　　　　　6 左到右刷新
　　　　　　　7 右到左刷新
　　　　　　　8 豎百葉窗
　　　　　　　9 橫百葉窗
　　　　　　 10 錯位橫百葉窗
　　　　　　 11 錯位豎百葉窗
　　　　　　 12 點擴散
　　　　　　 13 左右到中間刷新
　　　　　　 14 中間到左右刷新
　　　　　　 15 中間到上下
　　　　　　 16 上下到中間
　　　　　　 17 右下到左上
　　　　　　 18 右上到左下
　　　　　　 19 左上到右下
　　　　　　 20 左下到右上
　　　　　　 21 橫條
　　　　　　 22 豎條
　　　　　　 23 以上22種隨機選擇一種


　　10、MSThemeCompatible (XP主題)
　　　說明：是否在IE中關閉 xp 的主題
　　　用法：<Meta http-equiv="MSThemeCompatible" Content="Yes">
　　　註意：關閉 xp 的藍色立體按鈕系統顯示樣式，從而和win2k 很象。


　　11、IE6 (頁面生成器)
　　　說明：頁面生成器generator，是ie6
　　　用法：<Meta http-equiv="IE6" Content="Generator">
　　　註意：用什麼東西做的，類似商品出廠廠商。


　　12、Content-Script-Type (腳本相關)
　　　說明：這是近來W3C的規範，指明頁面中腳本的類型。
　　　用法：<Meta http-equiv="Content-Script-Type" Content="text/javascript">
　

 

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 元素顯示隱藏的9種思路
    × 目錄 [1]display [2]visibility [3]hidden[4]opacity[5]overflow[6]clip[7]transform[8]覆蓋[9]偏移 前面的話 在網頁製作中，元素的顯示隱藏是非常常見的需求。本文將介紹元素顯示隱藏的9種思路 思路一: display 對於 ...
  • [記錄]關於vertical-align單/多選框與說明文字對齊效果
    效果圖: 第一張使用label標簽,第二張沒有使用.. 使用label標簽,middle對齊方式的單選框下降了1px 而沒有使用label標簽,sub對齊方式的 卻 居 中 了 =_= 不太理解,困.. 留一記錄, 忘能解惑 代碼: 1.說明名字用<label>標簽 2.說明文字沒有使用<label ...
  • 初識正則表達式
    一、字元串操作包括哪些？ search 查找 <script> var str='abcdefd'; alert(str.search('a')); //返回0，從0開始 alert(str.search('bc')); //返回1，這個1是bc出現的位置，search只找第一次出現的位置 aler ...
  • 原生JS投票特效
    效果：http://hovertree.com/texiao/js/24/ 效果圖： 代碼如下： 轉自：http://hovertree.com/h/bjaf/jsdiaocha.htm 特效：http://www.cnblogs.com/roucheng/p/texiao.html ...
  • 別真以為JavaScript中func.call/apply/bind是萬能的！
    自從學會call/apply/bind這三個方法後我就各種場合各種使用各種得心應手至今還沒踩過什麼坑，怎麼用？說直白點就是我自己的對象沒有某個方法但別人有，我就可以通過call/apply/bind去調用執行別人家的方法，不太懂具體用法的同學可移至MDN學習一下Function.prototype. ...
  • JavaScript清空數組的三種方法
    [文章系摘自網路，看到有用記錄在博客，同時共用給大家] 原鏈接：http://www.2cto.com/kf/201409/335383.html 方式1，splice var ary = [1,2,3,4]; ary.splice(0,ary.length); console.log(ary);  ...
  • JavaScript列印正倒直線
    做了一個作業，用JavaScript列印正倒直線，突然覺得自己還是邏輯有待加強訓練啊 做了一個作業，用JavaScript列印正倒直線，突然覺得自己還是邏輯有待加強訓練啊 document.write("<h3>列印倒正金字塔直線</h3>");//列印一個h3標簽，內容是裡邊的文字 var i= ...
  • 理解CSS中的數學表達式calc()
    前面的話 數學表達式calc()是CSS中的函數，主要用於數學運算。使用calc()為頁面元素佈局提供了便利和新的思路。本文將介紹calc()的相關內容 定義 數學表達式calc()是calculate計算的縮寫，它允許使用+、-、*、/這四種運算符，可以混合使用%、px、em、rem等單位進行計算 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類