<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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類