移動前端中常說的 viewport （視口）就是瀏覽器中用於呈現網頁的區域。視口通常並不等於螢幕大小，特別是可以縮放瀏覽器視窗的情況下。手機端與pc端視口存在差異，電腦端的視口寬度等於解析度，而移動端的視口寬度跟解析度沒有關係,寬度預設值是裝置廠家指定的。ios, android基本都將這個視口解析度設定為 980px。
當年賈伯斯設想：蘋果手機如果在市場上火爆了，但是各個**還沒有來得及製作手機端網頁，那麼使用者不得不用手機訪問電腦版的網頁，如何用小螢幕訪問大螢幕的頁面也同樣可讀呢？喬幫主就想著為手機固定乙個視口寬度，讓手機的視口寬度等於世界上絕大多數pc網頁的版心寬度，就是980px。這樣，用手機訪問電腦版網頁的時候，旁邊剛好沒有留白。不過頁面縮放後文字會變得非常小，使用者需要手動放大縮小才能看清楚，體驗非常差。
為了解決前面的問題，可以在網頁的中新增下面這行**：
"viewport" content=
"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
>
width=device-width 視口為裝置寬度（就是人設定的乙個寬度）//不設定的話預設為980px
initial-scale=
1.0 初始化的視口大小是1.0倍
maximum-scale=
1.0 最大的倍數是1.0倍
user-scalable=
0 不允許縮放視口
不錯呀！使用者體驗大大改善！！！ 此時如果用document.documentelement.clientwidth來測試瀏覽器螢幕寬度，你會發現當前視口寬度等於手機螢幕的寬度，約數後的視口寬度都是在320~480之間（手機豎直使用的時候）。 這個視口的尺寸，是手機廠商設定的，能夠保證我們的文字比如16px，在自己的這個視口下清晰、大小剛剛合適。所以大螢幕的手機的約束視口 > 小螢幕手機的約束視口。這就能夠保證我們的網頁可以用px寫字號、寫行高。 需要注意的是：約束之後的視口寬度，不是自己的解析度！！每個手機的解析度，都要比自己的視口寬度大得多得多！ 最最重要的一句話：前端開發工程師，絲毫不關心手機的解析度，我們只關心視口。
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
響應式布局
裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...
響應式布局
首先，什麼是響應式布局呢？響應式布局是2010年5月提出的乙個概念，簡單地說就是乙個 能夠相容多個終端，而不是為每個終端做乙個特定的版本。這個概念是為了解決移動網際網路瀏覽器而產生的，目的是為使用者提供更加舒適的介面以及良好的使用者體驗。優點 1.面對不同解析度裝置靈活性強 2.能夠方便的解決多裝置...