當咱們對移動端進行頁面適配時,咱們首先應該瞭解到meta viewport,media query,以及動態rem。css
手機瀏覽器會把頁面放入到一個虛擬的「視口」(viewpoint)中,但viewport又不侷限於瀏覽器可視區域的大小,它可能比瀏覽器的可視區域大,也可能比瀏覽器的可視區域小。一般這個虛擬的「視口」(viewport)比屏幕寬,會把網頁擠到一個很小的窗口。
若是不顯示地設置viewport,那麼瀏覽器就會把width默認設置爲980。但後果是瀏覽器出現橫向滾動條,由於瀏覽器可視區域的寬度比默認的viewport的寬度小。
而後瀏覽器引進了 viewport 這個 meta tag,讓網頁開發者來控制 viewport 的大小和縮放。css3
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
(1)layout viewport瀏覽器
若是把移動設備上瀏覽器的可視區域設爲viewport的話,某些網站會由於viewport太窄而顯示錯亂,因此這些瀏覽器就默認會把viewport設爲一個較寬的值,好比980px,使得即便是那些爲PC瀏覽器設計的網站也能在移動設備瀏覽器上正常顯示。這個瀏覽器默認的viewport叫作 layout viewport。layout viewport的寬度能夠經過 document.documentElement.clientWidth來獲取。iphone
(2)visual viewportide
layout viewport的寬度是大於瀏覽器可視區域的寬度的,因此還須要一個viewport來表明瀏覽器可視區域的大小,這個viewport叫作 visual viewport。visual viewport的寬度能夠經過 document.documentElement.innerWidth來獲取。svn
(3)ideal viewport網站
ideal viewport是一個能完美適配移動設備的viewport。首先,不須要縮放和橫向滾動條就能正常查看網站的全部內容;其次,顯示的文字、圖片大小合適,如14px的文字不會由於在一個高密度像素的屏幕裏顯示得過小而沒法看清,不管是在何種密度屏幕,何種分辨率下,顯示出來的大小都差很少。這個viewport叫作 ideal viewport。google
ideal viewport並無一個固定的尺寸,不一樣的設備有不一樣的ideal viewport。例如,全部的iphone的ideal viewport寬度都是320px,不管它的屏幕寬度是320仍是640。idea
ideal viewport 的意義在於,不管在何種分辨率的屏幕下,針對ideal viewport 而設計的網站,不須要縮放和橫向滾動條均可以完美地呈現給用戶。spa