作響應式網站的知識點

1.  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />用與在360瀏覽器中出發Chrome內核的方法。

　　<meta http-equiv="X-UA-Compatible" content="IE=edge"/>取IE瀏覽器的最高版本的瀏覽器模式。也可將等號後的內容換成具體的IE幾。

2.  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">   

　　網頁手機wap2.0網頁的head里加入下面這條元標籤，在iPhone的瀏覽器中頁面將以原始大小顯示，並不容許縮放。  

1.  width - viewport的寬度 height - viewport的高度  
2.  initial-scale - 初始的縮放比例
3.  minimum-scale - 容許用戶縮放到的最小比例 
4.  maximum-scale - 容許用戶縮放到的最大比例  
5. user-scalable - 用戶是否能夠手動縮放

 

響應式新首頁Device Adaptation小結

因爲用戶瀏覽器分辨率分佈、運營維護成本、全站頁面寬度規範等緣由，2012年底一淘新首頁對1200px、990px、750px（for ipad）這3個尺寸的響應不一樣佈局，指望在ipad下橫屏顯示990px版本,豎版顯示750版本，iphone下顯示750版本。不一樣設備尺寸的不一樣顯示天然少不了viewport設置，目前W3C針對viewport的規範還處於草案階段，有2種方式能夠設置頁面的viewport,viewport meta標籤和@viewport css方式。

窗體頂端

1、viewport meta element

窗體底端

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

該viewport meta支持如下6個屬性，ios對viewport meta的實現對比W3C規範草案：

屬性	safari的實現	W3C規範草案
width	可視區域的寬度，默認是980px,取值區間[200,10000];ios 1.0及以上支持	可視區域的寬度，取值區間[1,10000]
height	可視區域的高度，默認爲根據設備的寬高比再根據寬度計算出，取值範圍爲[223,10000];ios 1.0及以上支持	可視區域的高度，取值區間爲[1~10,000]
initial-scale	初始化縮放比例，默認根據可顯示區域適應頁面大小計算出的，取值區間爲[minimum-scale，maximum-scale];ios 1.0及以上支持	初始化縮放比例，取值區間[0.1, 10]
minimum-scale	最小縮放比例,默認0.25，取值區間爲[>0,10];ios 1.0及以上支持	最小縮放比例,取值區間爲[0.1, 10]
maximum-scale	最大縮放比例,默認5.0，取值區間爲[>0,10]；ios 1.0及以上支持	最大縮放比例,取值區間爲[>0,10]
user-scalable	是否容許用戶手動縮放,默認yes,不容許爲no；ios 1.0及以上支持	是否容許用戶手動縮放,yes or no