中幾個經常使用標籤的意義

時間 2019-11-13

標籤幾個經常使用標籤意義简体版

原文原文鏈接

X-UA-Compatible是IE8+(IE8及以上版本)的一個專有<meta>屬性，它告訴IE採用何種IE版本去渲染網頁，在html的<head>標籤中使用。能夠在微軟官方文檔獲取更多介紹。css

爲何要用X-UA-Compatible？ html

在IE8+剛推出的時候，不少網頁因爲重構的問題，沒法適應較高級的瀏覽器，因此使用X-UA-Compatible標籤強制IE8+採用低版本方式渲染。瀏覽器

<meta http-equiv="X-UA-Compatible" content="IE=7">

#以上代碼告訴IE瀏覽器，不管是否用DTD聲明文檔標準，IE8/9都會以IE7引擎來渲染頁面。 iphone

<meta http-equiv="X-UA-Compatible" content="IE=edge">

#以上這段代碼使用的是Edge模式。Edge 模式告訴 IE 以最高級模式渲染文檔，也就是任何 IE 版本都以當前版本所支持的最高級標準模式渲染，避免版本升級形成的影響。簡單的說，就是什麼版本 IE 就用什麼版本的標準模式渲染。佈局

關於HTML5中meta name="viewport" 的用法ui

移動端的佈局不一樣於pc端，首先咱們要知道在移動端中，css中的1px並不等於物理上的1px，由於手機屏幕的分辨率已經愈來愈高，高像素可是屏幕尺寸卻沒有發生太大變化，那就意味着一個物理像素點實際上塞入了好幾個像素。.net

在移動端瀏覽器中以及某些桌面瀏覽器中，window對象有一個devicePixelRatio屬性，它的官方的定義爲：設備物理像素和設備獨立像素的比例，也就是 devicePixelRatio = 物理像素 / 獨立像素。css中的px就能夠看作是設備的獨立像素，因此經過devicePixelRatio，咱們能夠知道該設備上一個css像素表明多少個物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值爲2，也就是說1個css像素至關於2個物理像素。可是要注意的是，devicePixelRatio在不一樣的瀏覽器中還存在些許的兼容性問題，因此咱們如今還並不能徹底信賴這個東西。scala

還有一個因素也會引發css中px的變化，那就是用戶縮放。例如，當用戶把頁面放大一倍，那麼css中1px所表明的物理像素也會增長一倍；反之把頁面縮小一倍，css中1px所表明的物理像素也會減小一倍。code

因此在作移動端開發時，爲了使移動端的頁面在不一樣的手機上一樣的大小來顯示，咱們能夠將頁面的寬度固定，而後獲取設備的寬度，能夠獲得咱們以前設定的寬度與設備寬度的比例，再使用HTML5新增的viewport來對頁面進行縮放，並固定不容許用戶再從新縮放。htm

在看viewport的具體用法以前，咱們先搞清楚幾個概念。

layout viewport：
- layout viewport 是網頁的全部內容，他能夠所有或者部分展現給用戶。
visual viewport
- visual viewport 就是當前顯示給用戶內容的窗口，你能夠拖動或者放大縮小網頁。

不太懂的看下圖就知道了：

viewport具體用法爲:
使用該meta標籤時，在content中寫屬性，用逗號隔開

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />

屬性名	備註
width	設置layout viewport 的寬度，爲一個正整數，使用字符串」width-device」表示設備寬度
initial-scale	設置頁面的初始縮放值，爲一個數字，能夠帶小數
minimum-scale	容許用戶的最小縮放值，爲一個數字，能夠帶小數
maximum-scale	容許用戶的最大縮放值，爲一個數字，能夠帶小數
height	設置layout viewport 的高度，這個屬性對咱們並不重要，不多使用
user-scalable	是否容許用戶進行縮放，值爲」no」或」yes」, no 表明不容許，yes表明容許
–	–
target-densitydpi	值能夠爲一個數值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 這幾個字符串中的一個

最後一個屬性爲安卓特有，而且安卓已經決定要廢棄target-densitydpi 這個屬性了，因此這個屬性咱們要避免進行使用。

下面的代碼：

<meta name="viewport" content="width=device-width, initial-scale=1">

參考https://blog.csdn.net/qq_16339527/article/details/52996316

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

中幾個經常使用 標籤的意義

中幾個經常使用標籤的意義