響應(yīng)式 Web 設(shè)計(jì) - Viewport

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

<metaname="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

首先什么是Viewport

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

官方話來說: 手機(jī)瀏覽器是把頁面放在一個(gè)虛擬的“窗口”(viewport)中,通常這個(gè)虛擬的“窗口”(viewport)比屏幕寬,這樣就不用把每個(gè)網(wǎng)頁擠到很小的窗口中(這樣會(huì)破壞沒有針對(duì)手機(jī)瀏覽器優(yōu)化的網(wǎng)頁的布局),用戶可以通過平移和縮放來看網(wǎng)頁的不同部分。移動(dòng)版的 Safari 瀏覽器最新引進(jìn)了 viewport 這個(gè) meta tag,讓網(wǎng)頁開發(fā)者來控制 viewport 的大小和縮放,其他手機(jī)瀏覽器也基本支持。

設(shè)置Viewport

width: viewport寬度;

height: viewport高度 ;

initial-scale: 初始縮放比例;

maximum-scale: 最大縮放比例;

minimum-scale: 最小縮放比例;

user-scalable: 是否允許用戶可以手動(dòng)縮放;


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 開發(fā)移動(dòng)網(wǎng)頁時(shí),你一定會(huì)遇到下面這段代碼: 在網(wǎng)頁的 中增加以上這句話,可以讓網(wǎng)頁的寬度自動(dòng)適應(yīng)手機(jī)屏幕的寬度。其...
    gzgogo閱讀 2,451評(píng)論 4 16
  • 原文地址 在移動(dòng)設(shè)備上進(jìn)行網(wǎng)頁的重構(gòu)或開發(fā),首先得搞明白的就是移動(dòng)設(shè)備上的viewport了,只有明白了viewp...
    matthewm閱讀 1,603評(píng)論 0 4
  • 移動(dòng)前端開發(fā)之viewport的深入理解 一、viewport的概念 通俗的講,移動(dòng)設(shè)備上的viewport就是設(shè)...
    明明三省閱讀 15,624評(píng)論 1 46
  • 今早起來肚子就有點(diǎn)咕咕響,但我沒有馬上去買吃的,我要逐漸鍛煉這種空腹力。直到近12點(diǎn)才去隔壁買了一小袋桂圓和一個(gè)火...
    張春華閱讀 372評(píng)論 0 0
  • 每天的生活都在與數(shù)字打交道,7點(diǎn)起床,9點(diǎn)上班,早餐4元,上22樓,快10點(diǎn)了,日?qǐng)?bào)需要發(fā)出,12點(diǎn)午飯時(shí)間,...
    沉魚落雁的懶蛋蛋閱讀 289評(píng)論 0 0

友情鏈接更多精彩內(nèi)容