HTML5常用<meta>屏幕適配標(biāo)簽設(shè)置

適應(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

http://blog.sina.com.cn/s/blog_6d48e77101015kqr.html

http://blog.sina.com.cn/s/blog_3f1fc8950101fz2v.html

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末喻粹,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子草巡,更是在濱河造成了極大的恐慌守呜,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,509評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異弛饭,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)萍歉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門(mén)侣颂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人枪孩,你說(shuō)我怎么就攤上這事憔晒。” “怎么了蔑舞?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,875評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵拒担,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我攻询,道長(zhǎng)从撼,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,441評(píng)論 1 293
  • 正文 為了忘掉前任钧栖,我火速辦了婚禮低零,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘拯杠。我一直安慰自己掏婶,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布潭陪。 她就那樣靜靜地躺著雄妥,像睡著了一般。 火紅的嫁衣襯著肌膚如雪依溯。 梳的紋絲不亂的頭發(fā)上老厌,一...
    開(kāi)封第一講書(shū)人閱讀 51,365評(píng)論 1 302
  • 那天,我揣著相機(jī)與錄音黎炉,去河邊找鬼梅桩。 笑死,一個(gè)胖子當(dāng)著我的面吹牛拜隧,可吹牛的內(nèi)容都是我干的宿百。 我是一名探鬼主播,決...
    沈念sama閱讀 40,190評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼洪添,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼垦页!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起干奢,我...
    開(kāi)封第一講書(shū)人閱讀 39,062評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤痊焊,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體薄啥,經(jīng)...
    沈念sama閱讀 45,500評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡辕羽,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評(píng)論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了垄惧。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片刁愿。...
    茶點(diǎn)故事閱讀 39,834評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖到逊,靈堂內(nèi)的尸體忽然破棺而出铣口,到底是詐尸還是另有隱情,我是刑警寧澤觉壶,帶...
    沈念sama閱讀 35,559評(píng)論 5 345
  • 正文 年R本政府宣布脑题,位于F島的核電站,受9級(jí)特大地震影響铜靶,放射性物質(zhì)發(fā)生泄漏叔遂。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評(píng)論 3 328
  • 文/蒙蒙 一争剿、第九天 我趴在偏房一處隱蔽的房頂上張望掏熬。 院中可真熱鬧,春花似錦秒梅、人聲如沸旗芬。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,779評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)疮丛。三九已至,卻和暖如春辆它,著一層夾襖步出監(jiān)牢的瞬間誊薄,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,912評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工锰茉, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留呢蔫,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,958評(píng)論 2 370
  • 正文 我出身青樓飒筑,卻偏偏與公主長(zhǎng)得像片吊,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子协屡,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 一俏脊、先羅列一些知名網(wǎng)站的META 1.天貓 天貓觸屏版 2.淘寶 淘寶網(wǎng)觸屏版 3.京東 京東 - 手機(jī)版 4.網(wǎng)...
    Mike_Gu閱讀 861評(píng)論 0 0
  • HTML的頭部?jī)?nèi)容特別多,有針對(duì)SEO的頭部信息肤晓,也有針對(duì)移動(dòng)設(shè)備的頭部信息爷贫。而且各個(gè)瀏覽器內(nèi)核以及各個(gè)國(guó)內(nèi)瀏覽器...
    yo_yo_閱讀 1,505評(píng)論 0 3
  • 基本標(biāo)簽 聲明文檔使用的字符編碼 聲明文檔的兼容模式 SEO優(yōu)化 頁(yè)面描述 頁(yè)面關(guān)鍵詞 定義網(wǎng)頁(yè)作者 定義網(wǎng)頁(yè)搜索...
    您好小耗子閱讀 1,106評(píng)論 0 11
  • 1认然、感恩今晚雨杭轉(zhuǎn)播思瑤?kù)`性的分享,很落地很精彩漫萄。當(dāng)她分享到狼性和羊性其實(shí)就是我們父親和母親的一種力量的體現(xiàn)卷员,分享...
    感恩女神詩(shī)淘閱讀 759評(píng)論 0 1
  • 年末最后一天, 繼續(xù)行走在異鄉(xiāng)腾务。 懷揣著滿腹心事毕骡, 獨(dú)自登上香山。 站在山頂看日落窑睁, 心情也更加落寞。 把雙手合十...
    陌路將至閱讀 391評(píng)論 10 8