修正 iPhone 手機旋轉後畫面會放大的問題

續前篇 使用 Veiwport 對於行動裝置的影響 所衍生出來的問題。

完成了設定 width=device-width 使各廠牌手機的可視寬度與整個頁面寬度相同固然可喜可賀，看起來很正常，沒有什麼異狀呀！也達到我們想要讓使用者看到的結果。（如下圖所示）

但各位可以旋轉一下試試看！此時，奇妙的事情發生了（如下圖所示）～沒錯！我的畫面好像被放大了耶～真是太神奇了～傑克！趕快去借一支 Android 手機來試試看？神奇的事情又發生了，Android 正常的很耶！

做個開玩笑的結論～呼籲所有使用者都購買 Android 手機來用，不要用 IOS 了～哈哈～

本著研究與分享的態度，我們當然會朝著這個問題去解決，所以，上一行的結論是一句玩笑話，請各位不要當真！

為什麼 iPhone 旋轉一下會造成疑似壞掉的現象發生？其實，嚴格說起來不算是壞掉，只不過是需要請使用者再用手指稍微往左邊滑一下才可看到右方的內容。但我們站在使用者的角度來想，若要上、下滑動以閱讀所需的資訊時卻又要顧慮到可能不小心滑到左、右造成版面的偏移，這樣也太不人性化了吧！

主要原因是 iPhone 的畫面為 320px * 480px，也就是說～當各位將 iPhone 以垂直來檢視時，其寬度為 320px，在我們下了 width=device-width 後，Mobile Browser 也會認定 Viewport 的寬度為 320px；若是再旋轉一下手機也就是以水平來檢視時，寬度已改變為 480px 了，但 Viewport 還是認定寬度為 320px。所以 Mobile Browser 便做了一個縮放比例的動作，也就是放大了 1.5 倍（480 / 320）。

以我們的展示範例來說，我們用 CSS 將區塊的寬度設定為 90%，經過 1.5 倍放大後得到的實際大小為 135%，所以當然會超出螢幕的寬度，讓使用者得到了一個不是很理想的閱讀版面。如果以水平檢視在該網頁內連至另一頁時，各位會發現到 Mobile Browser 正常了！那是因為 width=device-width 又再次定義了 Viewport 的寬度（另一頁也要加上 Viewport 喔！）。

防止 iPhone 旋轉後畫面會放大的解決方式

我們可以在 Meta Data 的 Viewport 內再加上一個屬性，如下圖所示：

加上了 maximum-scale=1.0 就是說最大縮放比例以 100% 為主，這樣一來也導致了使用者無法再利用手指來縮放畫面了！

寫到這裡～或許有人會覺得問題獲得了改善卻也導致了另一個問題的發生（縮放畫面無法使用）！但我們以站在使用者的角度來衡量，理想的閱讀版面還是比較重要！不知您是否也這樣覺得呢?