什麼是viewport手機瀏覽器是把頁面放在乙個虛擬的「視窗」（viewport）中，通常這個虛擬的「視窗」（viewport）比螢幕寬，這樣就不用把每個網頁擠到很小的視窗中（這樣會破壞沒有針對手機瀏覽器優化的網頁的布局），使用者可以通過平移和縮放來看網頁的不同部分。移動版的 safari 瀏覽器最新引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放，其他手機瀏覽器也基本支援。
viewport 基礎
乙個常用的針對移動網頁優化過的頁面的 viewport meta 標籤大致如下：
<
meta
name
=」viewport」
content
=」width=device-width,
initial-scale
=1,
maximum-scale
=1″>
width：控制 viewport 的大小，可以指定的乙個值，如果 600，或者特殊的值，如 device-width 為裝置的寬度（單位為縮放為 100% 時的 css 的畫素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
maximum-scale：允許使用者縮放到的最大比例。
minimum-scale：允許使用者縮放到的最小比例。
user-scalable：使用者是否可以手動縮放
關於viewport的一些問題
viewport並非只是ios上的獨有屬性，在android、winphone上同樣也有viewport。它們要解決的問題是相同的，即無視裝置的真實解析度，直接通過dpi，在物理尺寸和瀏覽器之間重設解析度，這個解析度和裝置的解析度無關。比如，你拿個3.5寸-320 * 480的iphone3 gs、3.5寸-640 * 960的iphone4或者9.7寸-1024*768的ipad2，雖然裝置的解析度不同,物理尺寸也不同，但你可以通過設定viewport讓它們在瀏覽器裡有相同的解析度。比如說，你的**是800px寬，你可以通過設定viewport的width=800，來讓你的**在這三個不同的裝置上都剛好滿屏顯示你的**。
以上的知識，相信每個對viewport稍有了解的同學應該都已經了解了。這不是我今天想說的重點。我想說明的是viewport在ios和android上的一些差異表現。
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
/>
但我要做的乙個應用卻恰恰相反，需要利用viewport，利用縮放。不論真實解析度是多少，無論物理尺寸是多少，我都希望在瀏覽器裡，能有統一的解析度，同時也不允許使用者縮放。我用來測試的裝置有：iphone4、ipad2、htc的g11、不知道什麼廠商的aquos phone（android系統）、華碩的android pad、dell的winphone然後我一路遇到了如下問題：
1）如果不顯示地設定viewport，那麼width的預設為980。如果頁面的所有元素寬度都小於980，此時width為980，如果頁面最寬的位置超過980，那麼width等於最大寬度。總之，預設能將整個頁面從左到右顯示出來。如果設定了viewport，比如，只單純地設定了user-scalable=no，例如
<
meta
name
="viewport"
content
="user-scalable=no"
/>
，那麼ios下width還是按980顯示（即預設就會通過dpi縮放），但android和winphone下卻不會再縮放了，瀏覽器解析度和真實設定解析度一致。
2）對於ios裝置，設定width可以生效，但對於android，設定width並不會生效。ios裝置，縮放的比率即dpi是通過你設定的width和設定真實解析度自動計算的，而android下你設定width無效，你能設定的是乙個特殊的字段target-densitydpi，關於target-densitydpi可以參考一下這篇文章：也就是說，有三個變數：瀏覽器width、裝置真實width、dpi。 我們簡單地用個公式來表達它們之間的關係吧（並非真實關係，簡單說明用） 裝置真實width * dpi = 瀏覽器width，這裡的三個變數，裝置真實width是個我們不能操作的已知值，另外兩個變數我們可以設定乙個來影響另乙個，在ios中，我們能改的是瀏覽器width，dpi自動生成，而在android中，我們能改的是dpi，瀏覽器width自動生成。對於android，無論我們如何設定width，也不會對瀏覽器width產生影響。
ps：這裡我另外再說乙個奇怪的問題：在htc的g11裡（htc的手機我只有這乙個，別的沒有測），如果設定了dpi而不顯示地設定width，則user-scalable=no不生效，即是說：
<
meta
name
="viewport"
content
="target-densitydpi=300,user-scalable=no"
/>
，無法阻止使用者縮放螢幕。我們需要顯示地設定一下width值，僅管這個值對android下的瀏覽器分辨屏並不產生任何影響（對ios還是會產生影響的），我們仍然要設定它，而且這個值一定要大於320，如果小於等於320，也無法使user-scalable=no生效。這個問題只在htc的g11手機上出現，在aquos phone沒有這個問題。相容android真是件頭痛的事 @_@，未來還不知道有多少坑呢。而在winphone上，結果就更奇怪了：我給viewport的width設乙個大於480的值，user-scalable=no就失效了，而設乙個小於480的值，user-scalable=no能生效。但無論我給viewport的width設多少值，對winphone真正顯示的width卻並不產生我預期的影響，通過target-densitydpi也沒有影響。設定width，如果小於480的話，螢幕會縮放，但縮小的比例卻和我預期完全不一樣，我不知道它是按照什麼規律縮放的。不知道這是winphone的問題，還是dell實現的問題。
3）這一條和上一條應該是直接相關的：ios裝置在橫豎屏時，會自動調整dpi，無論橫屏還是豎屏，都能保證瀏覽器width等於viewport中設定的值，所以橫豎屏的時候，頁面裡顯示的內容的大小是會自動縮放產生變化的。而android手機在橫豎屏的時候，不會改變dpi，在橫豎屏的時候，網頁不會產生縮放。也正因此，ios可以保證橫豎屏頁面都不會產生滾動條，滿屏顯示，而android卻無法保證這一點，橫著滿屏則豎著無法滿屏，反之亦然。
4）對於ios裝置，如果width顯示定義了，而頁面最寬的位置超過width的話，width無效，仍按最寬的寬度來顯示（不會有滾動條）。但此時會出現乙個很奇怪的問題，當你將手機橫豎屏切換幾次之後，會發現你的頁面自動放大了，出現了滾動條，但其實放大後的寬度其實和你設的width也並沒有關係。為了防止這種情況出現，你需要將width的寬度設定得比頁面最寬的地方更大，或者相同。
HTML meta viewport屬性說明
手機瀏覽器是把頁面放在乙個虛擬的 視窗 viewport 中，通常這個虛擬的 視窗 viewport 比螢幕寬，這樣就不用把每個網頁擠到很小的視窗中 這樣會破壞沒有針對手機瀏覽器優化的網頁的布局 使用者可以通過平移和縮放來看網頁的不同部分。移動版的 safari 瀏覽器最新引進了 viewport ...
HTML meta viewport屬性說明
什麼是viewport 手機瀏覽器是把頁面放在乙個虛擬的 視窗 viewport 中，通常這個虛擬的 視窗 viewport 比螢幕寬，這樣就不用把每個網頁擠 到很小的視窗中 這樣會破壞沒有針對手機瀏覽器優化的網頁的布局 使用者可以通過平移和縮放來看網頁的不同部分。移動版的 safari 瀏覽器最新...
jsp裡呼叫屬性出錯，說沒發現屬性
org.apache.jasper.jasperexception cannot find any information on property num in a bean of type com.buy.bean.coin.addcoinselectbean org.apache.jasper....