viewport 指的是網頁上的使用者可視區域。移動裝置上的可視區域相較於 pc 要小得多。這樣一來，在 pc 螢幕上可以正常顯示的網頁，在移動裝置上就必須縮小後才能放得下。這就造成了下面這個問題。
initial-scale=1.0 設定首次載入時的縮放比例為 1:1
加上後的效果
對於移動端使用者來說，水平方向的滾動條是非常不好的體驗，所以，要盡量阻止水平滾動條的產生。而設定 viewport 並不能完全做到這一點。為什麼呢？因為 viewport只是設定頁面寬度為螢幕寬度，但是對於寬度非常大的元素，比如乙個設定了寬度的，就無能為力。
下面是一些經驗，可以避免上面的問題。
*responsive web design - the viewport
移動前端viewport的基礎概念
在pc端，視口指的是瀏覽器的可視區域，其寬度和瀏覽器的寬度一致，在css標準文件中，視口是所有css百分比寬度計算基礎，為css布局限制了乙個最大的寬度。viewport在移動端是乙個很重要的概念，涉及到三個視口 布局視口 layout viewport 視覺視口 visual viewport 和...
移動前端中的 viewport
移動裝置上的視口是裝置螢幕上用來顯示網頁的那部分區域，再具體一點就是瀏覽器上用來顯示網頁的那部分區域，但視口又不侷限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區域大，也可能比瀏覽器的可視區域小。在預設情況下，移動裝置上的視口都是大於瀏覽器可視區域的，這是因為移動裝置的解析度相對於pc來說都比較小，...
前端 移動開發 畫素 viewport
css 畫素 css 畫素是 web 程式設計的概念，本質上是為我們 web 開發者建立的乙個抽象結構，是相對的而不是絕對的。物理畫素 物理畫素是物理概念，螢幕是由很多畫素點組成的，各畫素點通過發出不同顏色的光來呈現螢幕的色彩。它是物理的，隨著裝置生產出來就已經被確定下來了，比如 iphone4 的...