手機瀏覽器是把頁面放在乙個虛擬的「視窗」（viewport）中，通常這個虛擬的「視窗」（viewport）比螢幕寬，這樣就不用把每個網頁擠到很小的視窗中（這樣會破壞沒有針對手機瀏覽器優化的網頁的布局），使用者可以通過平移和縮放來看網頁的不同部分。移動版的 safari 瀏覽器最新引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放，其他手機瀏覽器也基本支援。
乙個常用的針對移動網頁優化過的頁面的 viewport meta 標籤大致如下：
width：控制 viewport 的大小，可以指定的乙個值，如果 600，或者特殊的值，如 device-width 為裝置的寬度（單位為縮放為 100% 時的 css 的畫素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
maximum-scale：允許使用者縮放到的最大比例。
minimum-scale：允許使用者縮放到的最小比例。
user-scalable：使用者是否可以手動縮放
通俗的講，就是為移動裝置開發網頁。伴隨著3g時代的到來、瀏覽器技術的不斷進步，越來越多的人開始離開pc，使用手中的移動裝置（手機、psp、平板）上網。如果您是乙個注意生活細節的人，那麼在您乘坐地鐵、公交的時候，請認真看看你周圍的人都在幹什麼？是不是每人抱著乙個手機在聽**、看新聞、聊天呢？
作為乙個開發人員，如何開發出更適合於移動裝置的網頁呢？如何讓您的站點能被大多數移動裝置更輕鬆地訪問？本系列文章將會一一的為您解答。
當今最受歡迎的手機系統包括 android，iphone ，symbian，blackberry 與web os。這些系統瀏覽器都是基於webkit核心，而webkit號稱是一款全功能的移動瀏覽器，支援 html + css + j**ascript，但由於移動裝置本身與pc的差異，導致我們開發的網頁在移動裝置上總是會存在一些不如人意的地方。
首先我們要接觸的第乙個概念就是「viewport」，翻譯為中文可以叫做「視區」，大家都知道移動裝置的螢幕一段都比pc小很多，webkit瀏覽器會將乙個較大的「虛擬」視窗對映到移動裝置的螢幕上，預設的虛擬視窗為980畫素寬（目前大部分**的標準寬度），然後按一定的比例（3：1或2：1）進行縮放。也就是說當我們載入乙個普通網頁的時候，webkit會先以980畫素的瀏覽器標準載入網頁，然後再縮小為490畫素的寬度。注意這個縮小是乙個全域性縮小，也就是頁面上的所有元素都會縮小。如下圖所示，乙個普通的文章頁面在移動裝置的效果：
頁面以980畫素載入，沒有變形，但是按比例縮放後，已經沒有多少東西是可以用肉眼看清的了，好在一般的移動裝置都支援螢幕放大。放大之後，我們才能看清螢幕上的內容。
怎麼樣，對viewport的概念有一定的了解了吧？那麼我們能不能人為改變webkit的視區呢？當然能，在之間加上如下視區**：
<我們來看看頁面加上強制視區大小命令後效果怎麼樣？ 如下圖所示：meta name="
viewport
"content="
width=500
"/>
怎麼樣？是不是好了很多？那麼有沒有更好的方法呢？比如說我們自動檢測移動裝置螢幕大小，然後讓內容自適應。很簡單，看來面的**：
device-width將自動檢測移動裝置的螢幕寬度。
怎麼樣？滿意了吧？所有頁面內容都和移動裝置螢幕自適應。
通俗的講，就是為移動裝置開發網頁。伴隨著3g時代的到來、瀏覽器技術的不斷進步，越來越多的人開始離開pc，使用手中的移動裝置（手機、psp、平板）上網。如果您是乙個注意生活細節的人，那麼在您乘坐地鐵、公交的時候，請認真看看你周圍的人都在幹什麼？是不是每人抱著乙個手機在聽**、看新聞、聊天呢？
作為乙個開發人員，如何開發出更適合於移動裝置的網頁呢？如何讓您的站點能被大多數移動裝置更輕鬆地訪問？本系列文章將會一一的為您解答。
當今最受歡迎的手機系統包括 android，iphone ，symbian，blackberry 與web os。這些系統瀏覽器都是基於webkit核心，而webkit號稱是一款全功能的移動瀏覽器，支援 html + css + j**ascript，但由於移動裝置本身與pc的差異，導致我們開發的網頁在移動裝置上總是會存在一些不如人意的地方。
首先我們要接觸的第乙個概念就是「viewport」，翻譯為中文可以叫做「視區」，大家都知道移動裝置的螢幕一段都比pc小很多，webkit瀏覽器會將乙個較大的「虛擬」視窗對映到移動裝置的螢幕上，預設的虛擬視窗為980畫素寬（目前大部分**的標準寬度），然後按一定的比例（3：1或2：1）進行縮放。也就是說當我們載入乙個普通網頁的時候，webkit會先以980畫素的瀏覽器標準載入網頁，然後再縮小為490畫素的寬度。注意這個縮小是乙個全域性縮小，也就是頁面上的所有元素都會縮小。如下圖所示，乙個普通的文章頁面在移動裝置的效果：
頁面以980畫素載入，沒有變形，但是按比例縮放後，已經沒有多少東西是可以用肉眼看清的了，好在一般的移動裝置都支援螢幕放大。放大之後，我們才能看清螢幕上的內容。
怎麼樣，對viewport的概念有一定的了解了吧？那麼我們能不能人為改變webkit的視區呢？當然能，在之間加上如下視區**：
<我們來看看頁面加上強制視區大小命令後效果怎麼樣？ 如下圖所示：meta name="
viewport
"content="
width=500
"/>
怎麼樣？是不是好了很多？那麼有沒有更好的方法呢？比如說我們自動檢測移動裝置螢幕大小，然後讓內容自適應。很簡單，看來面的**：
device-width將自動檢測移動裝置的螢幕寬度。
怎麼樣？滿意了吧？所有頁面內容都和移動裝置螢幕自適應。
視口viewport和度量iewport
乙個網頁被用在手機瀏覽器 時，都會做兩件事 第一，把內容放在960px的網頁上 第二，將該網頁進行縮放。這樣做的目的是讓pc端的網頁在移動端排版正確，而且能看到整個網頁 該960px的網頁就稱為視口viewport 縮放後的網頁成為度量viewport 我們可以用document.body.clie...
CAD視區縮放操作
放大縮小視區，顯示指定區域內容，回到上乙個視區，使用者使用視區相關命令，瀏覽圖紙圖紙內容，定位顯示。視區縮放命令 放大或縮小當前圖形的顯示。若您的滑鼠有滾輪，上下移動滾輪，來縮放圖形。1.單擊常用工具欄的 視區縮放命令 按鈕 2.在命令列中輸入zoomr 按回車鍵。執行命令後，命令行將顯示如下資訊 ...
初學前端之路 1視口控制（viewport）
當設計者設計網頁的時候，會按照固定的寬度設計，比如pc端1000畫素或者1200畫素等，在移動端640畫素或者750畫素，當轉換到pc端的時候可能也會滿足不了頁面需求，可能會顯示不完整，裝置寬度遠遠不夠。為了彌補這一點，移動裝置上瀏覽器會把視口放大，一般是980畫素或者1024畫素。但這樣帶來的後果...