1. 程式人生 > >移動端meta標籤

移動端meta標籤

設定這些meta標籤的主要作用是描述網頁,便於搜尋引擎抓取;相容瀏覽器,適配移動端;開啟或者是禁止一些預設的樣式和預設的事件等等。

1、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

作用:IE = edge告訴IE使用最新的引擎渲染網頁,chrome = 1則可以啟用Chrome Frame .

X-UA-Compatible是自從IE8新加的一個設定,對於IE8以下的瀏覽器是不識別的,通過在meta中設定X-UA-Compatible的值,可以指定網頁的相容性模式設定。

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

該meta標籤的作用是讓當前viewport的寬度等於裝置的寬度,同時不允許使用者手動縮放。

3、<meta name="format-detection" content="telephone=no, email=no" />

作用:telephone=no就禁止了把數字轉化為撥號連結!告訴裝置不識別郵箱,點選之後不自動傳送 email=no禁止作為郵箱地址!

4、<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

在iOS中有兩個meta值,apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style,這兩個會讓網頁內容以應用程式風格顯示,並使狀態列顯示預設顏色為黑色。