適應(yīng)手機(jī)端
<meta name="viewport" content="width-device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no, minimal-ui">
width - viewport的寬度 height - viewport的高度
initial-scale?-?初始的縮放比例
minimum-scale?-?允許用戶縮放到的最小比例
maximum-scale?-?允許用戶縮放到的最大比例
user-scalable?-?用戶是否可以手動(dòng)縮放
下面是我們經(jīng)常用到的一些標(biāo)簽,由于瀏覽器的差異,并不能百分百兼容
<!--是否刪除默認(rèn)的蘋(píng)果工具欄和菜單欄-->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!--避免IE使用兼容模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!--針對(duì)手持設(shè)備優(yōu)化蜀变,主要是針對(duì)一些老的不識(shí)別viewport的瀏覽器尼斧,比如黑莓-->
<meta name="HandheldFriendly" content="true"/>
<!--微軟的老式瀏覽器-->
<meta name="MobileOptimized" content="320"/>
<!--uc強(qiáng)制豎屏-->
<meta name="screen-orientation" content="portrait"/>
<!--QQ強(qiáng)制豎屏-->
<meta name="x5-orientation" content="portrait"/>
<!--UC強(qiáng)制全屏-->
<meta name="full-screen" content="yes"/>
<!--QQ強(qiáng)制全屏-->
<meta name="x5-fullscreen" content="true"/>
<!--UC應(yīng)用模式-->
<meta name="browsermode" content="application"/>
<!--QQ應(yīng)用模式-->
<meta name="x5-page-mode" content="app"/>
<!--windows phone 點(diǎn)擊無(wú)高光-->
<meta name="msapplication-tap-highlight" content="no"/>
在iPhone 手機(jī)上默認(rèn)值是(電話號(hào)碼顯示為撥號(hào)的超鏈接):
<meta name="format-detection" content="telephone=yes"/>
可將telephone=no退敦,則手機(jī)號(hào)碼不被顯示為撥號(hào)鏈接
<meta name="format-detection" content="telephone=no"/>
apple-touch-icon:
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"/>
如果 apple-mobile-web-app-capable 設(shè)置為 yes 了择葡,那么在蘋(píng)果機(jī)的safari上可以通過(guò)添加到主屏按鈕將網(wǎng)站添加到主屏幕上。而設(shè)置相應(yīng) apple-touch-icon 標(biāo)簽函匕,則添加到主屏上的圖標(biāo)就會(huì)使用我們指定的圖片千诬。
apple-touch-startup-image:
<link rel="apple-touch-startup-image" href="/startup.png"/>
基于 apple-mobile-web-app-capable 設(shè)置為 yes 耍目,可以為WebApp設(shè)置一個(gè)類似NativeApp的啟動(dòng)畫(huà)面。和 apple-touch-icon 不同徐绑, apple-mobile-web-app-capable 不支持sizes屬性邪驮,要使用media來(lái)加載不同的啟動(dòng)畫(huà)面。
網(wǎng)站開(kāi)啟對(duì)web app程序的支持
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
- 在web app應(yīng)用下?tīng)顟B(tài)條(屏幕頂部條)的顏色
- 默認(rèn)值為default(白色)傲茄,可以定為black(黑色)和black-translucent(灰色半透明)毅访。
- 若值為“black-translucent”將會(huì)占據(jù)頁(yè)面px位置,浮在頁(yè)面上方(會(huì)覆蓋頁(yè)面20px高度–iphone4和itouch4的Retina屏幕為40px)盘榨。
參考:
http://www.w3cplus.com/mobile/mobile-terminal-refactoring-create-page.html