1、<meta name="renderer" content="webkit">
這是指定雙核瀏覽器,默認以何種方式渲染頁面。
<meta name="renderer" content="webkit">//默認webkit內核
<meta name="renderer" content="ie-comp">//默認IE兼容模式
<meta name="renderer" content="ie-stand">//默認IE標準模式
而 webkit|ie-comp|ie-stand 這種寫法,跟font-family的規則類似,按照順序排他的優先級,不支持則往下,瀏覽器將會按照從左到右的先后順序選擇其具備的渲染內核來處理當前網頁。目前支持對其提供支持的瀏覽器有:360
2、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
這是一個文檔兼容模式的定義。
Edge 模式告訴 IE 以最高級模式渲染文檔,也就是任何 IE 版本都以當前版本所支持的最高級標準模式渲染,避免版本升級造成的影響。簡單的說,就是什么版本 IE 就用什么版本的標準模式渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge">
使用以下代碼強制 IE 使用 Chrome Frame 渲染
<meta http-equiv="X-UA-Compatible" content="chrome=1">
提示 IE 用戶安裝 Google Frame
Google 官方提供了對 Google Frame 插件安裝情況的檢測,這里直接調用方法即可,如果檢測到 IE 并未安裝 Google Frame,則彈出對話框提示安裝。
<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script><script>CFInstall.check();</script>
最佳的兼容模式方案,結合考慮以上兩種:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
3、<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
一、什么是Viewport
手機瀏覽器是把頁面放在一個虛擬的“窗口”(viewport)中,通常這個虛擬的“窗口”(viewport)比屏幕寬,這樣就不用把每個網頁擠到很小的窗口中,也不會破壞沒有針對手機瀏覽器優化的網頁的布局,用戶可以通過平移和縮放來看網頁的不同部分。移動版的 Safari 瀏覽器最新引進了viewport 這個 meta tag,讓網頁開發者來控制 viewport 的大小和縮放,其他手機瀏覽器也基本支持。
二、Viewport基礎
一個常用的針對移動網頁優化過的頁面的 viewport meta 標簽大致如下:
1、width : 控制viewport的大小,可以指定一個值,如600, 或者特殊的值,如device-width為設備的寬度(單位是縮放為100%的CSS的像素)
2、height : 和width相對應,指定高度
3、initial-scale : 初始縮放比例,頁面第一次加載時的縮放比例
4、maximum-scale : 允許用戶縮放到的最大比例,范圍從0到10.0
5、minimum-scale : 允許用戶縮放到的最小比例,范圍從0到10.0
6、user-scalable : 用戶是否可以手動縮放,值可以是:①yes、 true允許用戶縮放;②no、false不允許用戶縮放
4、<meta name="apple-mobile-web-app-status-bar-style" content="black">
作用:在web app應用下狀態條(屏幕頂部條)的顏色
5、<meta name="apple-mobile-web-app-capable" content="yes">
作用:刪除默認的蘋果工具欄和菜單欄
6、<meta name="format-detection" content="telephone=no">
作用:禁止把數字轉化為撥號鏈接