移動(dòng)端瀏覽器常用的 meta 標(biāo)簽匯總

點(diǎn)擊上方藍(lán)字關(guān)注我們?，軟件在能夠復(fù)用前必須先能用。

本文是 meta 標(biāo)簽系列的最后一篇文章。本系列共 4 篇：

前面幾篇文章，我們都已經(jīng)介紹過了meta標(biāo)簽的方方面面。本文將介紹移動(dòng)端及瀏覽器的一些常用meta標(biāo)簽

響應(yīng)式設(shè)計(jì)視口標(biāo)簽

viewport 是用戶網(wǎng)頁的可視區(qū)域。viewport 通常用于設(shè)置頁面的視口, 這個(gè)屬性常用于設(shè)計(jì)移動(dòng)端網(wǎng)頁。

一個(gè)常用的針對(duì)移動(dòng)網(wǎng)頁優(yōu)化過的頁面的 viewport meta 標(biāo)簽大致如下：

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

它主要有以下屬性值：

• width：控制 viewport 的大小，可以指定的一個(gè)值，如 600，或者特殊的值，如 device-width 為設(shè)備的寬度
• height：和 width 相對(duì)應(yīng)，指定高度
• initial-scale：初始縮放比例，也即是當(dāng)頁面第一次 load 的時(shí)候縮放比例
• maximum-scale：允許用戶縮放到的最大比例
• minimum-scale：允許用戶縮放到的最小比例
• user-scalable：用戶是否可以手動(dòng)縮放

關(guān)閉自動(dòng)識(shí)別

在IOS中，你的網(wǎng)頁里有一串?dāng)?shù)字，IOS會(huì)把他當(dāng)成電話號(hào)碼，點(diǎn)擊會(huì)撥打電話。通過使用下面這個(gè)標(biāo)簽可以取消這一功能。

1、關(guān)閉電話自動(dòng)識(shí)別：

2、關(guān)閉郵箱自動(dòng)識(shí)別：

如果同樣也需要禁止自動(dòng)識(shí)別郵箱，可以在原來的基礎(chǔ)上增加"email=no"。

QQ 移動(dòng)瀏覽器的一些設(shè)置

3、在指定方向上鎖定屏幕（鎖定橫 / 豎屏）

4、全屏顯示此頁面

5、頁面以"應(yīng)用模式"顯示

UC 移動(dòng)瀏覽器的一些設(shè)置

6、在指定方向上鎖定屏幕（鎖定橫 / 豎屏）

7、全屏顯示頁面

8、即使在"文本模式"下，UC 瀏覽器也會(huì)顯示圖片

9、頁面將以"應(yīng)用模式"顯示（全屏、禁止手勢(shì)等）

10、禁用 UC 瀏覽器的"夜間模式"

11、簡(jiǎn)化頁面，減少數(shù)據(jù)傳輸

12、禁用的 UC 瀏覽器"當(dāng)此頁面中有較多文本時(shí)縮放字體"的功能

設(shè)置 360 瀏覽器的渲染引擎

13、選擇渲染引擎

Apple iOS Safari 瀏覽器

添加到主屏幕

14、啟動(dòng)圖標(biāo) （大于等于 180x180px)

15、啟動(dòng)屏幕圖片

16、啟動(dòng)圖標(biāo)的標(biāo)題

17、啟用獨(dú)立（全屏）模式, 刪除蘋果默認(rèn)的工具欄和菜單欄

17、狀態(tài)欄外觀（除非啟用獨(dú)立模式，否則無效） 默認(rèn)值為default(白色)，可以定為black(黑色)和black-translucent(灰色半透明)

Google Android

18、設(shè)置主題色

19、設(shè)置添加到主屏幕

Google Chrome

20、禁用翻譯提示

微軟 IE 瀏覽器

21、強(qiáng)制 IE 8/9/10 使用其最新的渲染引擎

22、通過 Skype Toolbar 瀏覽器擴(kuò)展功能禁用自動(dòng)檢測(cè)和格式化可能的電話號(hào)碼

23、Windows 磁貼

最低要求的的 browserconfig.xml 配置：

結(jié)語

以上介紹了一些在特定平臺(tái)上，常用的meta標(biāo)簽。可用于簡(jiǎn)單的定義網(wǎng)頁在瀏覽器及平臺(tái)上的表現(xiàn)。