Viewport

什么是 Viewport?

viewport 是用戶網(wǎng)頁的可視區(qū)域忆肾。

viewport 翻譯為中文可以叫做"視區(qū)"袁梗。

手機瀏覽器是把頁面放在一個虛擬的"窗口"(viewport)中,通常這個虛擬的"窗口"(viewport)比屏幕寬生兆,這樣就不用把每個網(wǎng)頁擠到很小的窗口中(這樣會破壞沒有針對手機瀏覽器優(yōu)化的網(wǎng)頁的布局)鸽素,用戶可以通過平移和縮放來看網(wǎng)頁的不同部分谭溉。

設(shè)置 Viewport

一個常用的針對移動網(wǎng)頁優(yōu)化過的頁面的 viewport meta 標(biāo)簽大致如下:

Viewport


width:控制 viewport 的大小友绝,可以指定的一個值屎篱,如果 600,或者特殊的值啰劲,如 device-width 為設(shè)備的寬度(單位為縮放為 100% 時的 CSS 的像素)躏筏。

height:和 width 相對應(yīng),指定高度呈枉。

initial-scale:初始縮放比例,也即是當(dāng)頁面第一次 load 的時候縮放比例埃碱。

maximum-scale:允許用戶縮放到的最大比例猖辫。

minimum-scale:允許用戶縮放到的最小比例。

user-scalable:用戶是否可以手動縮放砚殿。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末啃憎,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子似炎,更是在濱河造成了極大的恐慌辛萍,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件羡藐,死亡現(xiàn)場離奇詭異贩毕,居然都是意外死亡,警方通過查閱死者的電腦和手機仆嗦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進店門辉阶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人瘩扼,你說我怎么就攤上這事谆甜。” “怎么了集绰?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵规辱,是天一觀的道長。 經(jīng)常有香客問我栽燕,道長罕袋,這世上最難降的妖魔是什么改淑? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮炫贤,結(jié)果婚禮上溅固,老公的妹妹穿的比我還像新娘。我一直安慰自己兰珍,他們只是感情好侍郭,可當(dāng)我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著掠河,像睡著了一般亮元。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上唠摹,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天爆捞,我揣著相機與錄音,去河邊找鬼勾拉。 笑死煮甥,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的藕赞。 我是一名探鬼主播成肘,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼斧蜕!你這毒婦竟也來了双霍?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤批销,失蹤者是張志新(化名)和其女友劉穎洒闸,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體均芽,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡丘逸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了掀宋。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鸣个。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖布朦,靈堂內(nèi)的尸體忽然破棺而出囤萤,到底是詐尸還是另有隱情,我是刑警寧澤是趴,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布涛舍,位于F島的核電站,受9級特大地震影響唆途,放射性物質(zhì)發(fā)生泄漏富雅。R本人自食惡果不足惜掸驱,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望没佑。 院中可真熱鬧毕贼,春花似錦、人聲如沸蛤奢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽啤贩。三九已至待秃,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間痹屹,已是汗流浹背章郁。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留志衍,地道東北人暖庄。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓,卻偏偏與公主長得像楼肪,于是被迫代替她去往敵國和親培廓。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,033評論 2 355

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

  • 開發(fā)移動網(wǎng)頁時淹辞,你一定會遇到下面這段代碼: 在網(wǎng)頁的 中增加以上這句話,可以讓網(wǎng)頁的寬度自動適應(yīng)手機屏幕的寬度俘侠。其...
    gzgogo閱讀 2,271評論 4 16
  • 原文地址 在移動設(shè)備上進行網(wǎng)頁的重構(gòu)或開發(fā)象缀,首先得搞明白的就是移動設(shè)備上的viewport了,只有明白了viewp...
    matthewm閱讀 1,551評論 0 4
  • 感謝你爷速,讓我知道央星,有些話當(dāng)講有些話不當(dāng)講;而我惫东,對不起你莉给,因為你裝逼的時候我只會在一旁靜靜地看著你裝!
    想要太陽閱讀 127評論 0 0
  • 米蘭畫閱讀 187評論 0 0
  • 親子日記第26篇2017年10月20日 星期五 晴 下午接孩子回家廉沮,到小區(qū)后看見小朋友們正在下面玩游戲颓遏,孩子...
    海內(nèi)存知己_bd9e閱讀 356評論 0 1