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