修正 iOS 螢幕轉向網頁自動放大問題

最近因為專案所以在開發手機及平板的網頁,當在測試時發現只有iOS的裝置 (iPhone/iPad) 在旋轉後網頁怎麼會自動放大 Android 則一切正常,查了一下原因是出在meta這個 Tag 的設定。

以下是原本的meta

<meta name="viewport" content="width=device-width, initial-scale=1">

原因是在於meta中的 content屬性的設定,首先width=device-width只是單純在設定網頁的寬度要符合顯示螢幕,再來initial-scale=1這就是重點了,這是在設定當網頁載入時的放大比例,這邊設定放大率是一倍,這看起來很像很美好但它並沒有強制縮放比例,僅限於剛載入網頁時才有用。

所以將它修改為minimum-scale=1, maximum-scale=1將網頁的最大及最小縮放比例設為一倍,這樣不管螢幕怎樣旋轉,網頁縮放比例都不會變了。

這是修改後的meta

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
About
ScarWu

刀疤

記錄學習過程、生活以及一些想說的話。