移動端頁面 viewport的設定，橫屏字型重設的問題

標籤：

在最初做的時候因為一直沒有在手機上實測頁面，導致後來寫了好些頁面後實測發現頁面特別小，幾乎都看不見。

原因是每個行動裝置都是自己預設的視口寬度。

視口：在移動端瀏覽器當中有兩種視口：可見視口（裝置螢幕大小）和瀏覽器視口（網頁寬度）。

拿iphone4s來說，它的螢幕是320*480的，但是它卻能展示980像素寬度的內容（iphone預設都是980），所以你把網頁放到移動端展示就相當於縮小了980/320。手機這樣做的目的是可以顯示更多的東西，但是結果就是在PC端做好的頁面到了移動端就像螞蟻一樣小！

移動端有一個meta標籤:viewport，你可以用這個標籤設定瀏覽器視口寬度和可見視口寬度一樣。

<meta name="viewport" content="width=device-width">

對於一些不支援viewport的古老的行動裝置瀏覽器（嗯，也許還有,比如黑莓），可以使用如下代碼

<meta name="HandheldFriendly" content="true">

不過我覺得現在應該沒多少人用這個，一般就寫第一行就行了。

說到viewport，他其實還有一些其他屬性：

initial-scale：初始縮放比例

maximum-scale：允許縮放的最大比例

minimum-scale：允許縮放的最小比例

user-scalable：是否允許手動縮放

這些屬性有什麼用呢？

行動裝置在豎屏切換到橫屏的時候字型會被重設，會變得很大，如何解決呢？

只需要這樣設定

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

這樣設定頁面預設縮放大小比例是1，允許縮放也是1-1,相當于禁止縮放，瀏覽器只會按照樣式定義的字型大小渲染。

你也許會看到這種寫法。

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" >

但其實當你使用user-scalable=no 這個屬性的時候minimum-scale=1,maximum-scale=1已經被忽略掉了，因為你已經禁止縮放了。

在其他地方找到了一些更具體的說法：

1)、user-scalable=no就一定可以保證頁面不可以縮放嗎？NO，有些瀏覽器不吃這一套，還有一招就是minimum-scale=1.0, maximum-scale=1.0 最大與最小縮放比例都設為1.0就可以了。

2)、initial-scale=1.0   初始縮放比例受user-scalable控制嗎？不一定，有些瀏覽器會將user-scalable理解為使用者手動縮放，如果user-scalable=no，initial-scale將無法生效。

3)、手機頁面可以觸摸移動，但是如果有需要禁止此操作，就是頁面寬度等於螢幕寬度是頁面正好適應螢幕才可以保證頁面不能移動。

4)、如果頁面是經過縮小適應螢幕寬度的，會出現一個問題，當文字框被啟用（擷取焦點）時，頁面會放大至原來尺寸。

 所以為了保險起見，建議使用第二種寫法。

當然，這樣做的壞處就是禁止使用者進行縮放，在《web開發實戰》中有一個折中的辦法，有興趣的可以去看下，這裡就不在敘述。

 

一點點題外話：

在CSS3中有一個屬性：-webkit-text-size-adjust。

這個屬性也是禁止字型縮放，這個屬性的好處在於可以自訂範圍，可以根據項目需求設定。

 需要注意的是這個屬性的作用是禁用Webkit核心瀏覽器的文字大小調整功能而不是對頁面縮放控制。中文版chrome瀏覽器字型最小限制是12px。

不過由於該屬性被濫用，在幾年前案頭瀏覽器已經不支援了,所以我也沒有真正去用過，都是在其他資料上看到的。

 

以上，如有錯誤，敬請指正。

移動端頁面 viewport的設定，橫屏字型重設的問題