分享viewport屬性解決移動端豎屏切橫屏字體被重置的問題實例

本文分享的是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。

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

【相關推薦】

1. 特別推薦：「php程式設計師工具箱」V0.1版本下載

2. 關於viewport相容性問題的實例程式碼

#3. viewport專題：深入理解css中響應式Web 設計-viewport

4. HTML5中Viewport的參數介紹以及使用方法

#

以上是分享viewport屬性解決移動端豎屏切橫屏字體被重置的問題實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！