HTML5之Viewport详解
做移動(dòng)Web開發(fā)也有一年多的時(shí)間了,雖然手機(jī)上瀏覽器對(duì)于PC上來說很友好了,但是手機(jī)各種設(shè)備的顯示尺寸分辨率大小不一也要花大心思兼容它們.
關(guān)于HTML5中Viewport的文章Google,百度一搜有很多.記錄一些自己理解的內(nèi)容:
Viewport屬性詳解
Viewport:字面意思為視圖窗口,在移動(dòng) web 開發(fā)中使用.表示將設(shè)備瀏覽器寬度虛擬成一個(gè)特定的值(或計(jì)算得出)這樣利于移動(dòng) web 站點(diǎn)跨設(shè)備顯示效果基本一致.
基礎(chǔ)寫法:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />參數(shù)解釋:
?width?控制Viewport的寬度,可以指定一個(gè)值或者設(shè)備的寬度,如device-width為設(shè)備的寬度(單位為設(shè)備縮放比例1:1的像素),這里設(shè)置的寬度等于設(shè)備寬度;
?initial-scale?初始縮放,即頁面初始縮放程度.對(duì)應(yīng)的值是一個(gè)浮點(diǎn)值,這里是一個(gè)乘積關(guān)系,頁面呈現(xiàn)大小等于設(shè)置的寬度乘以initial-scale的值;
?maximum-scale?最大縮放,即允許用戶縮放的最大比例,也是乘積關(guān)系.一般設(shè)置為1:1的比例不會(huì)讓用戶縮放的;
?minimum-scale?最小縮放,如上;
?user-scalable?用戶是否可以手動(dòng)縮放,一般值設(shè)為no,不允許用戶縮放;
這段代碼的大意是讓viewport的物理寬度等于設(shè)備的分辨率,不允許用戶縮放.
第一次接觸移動(dòng)web的時(shí)候不知道該怎么做,就去看天貓的移動(dòng)站的?view-source?研究了幾個(gè)小時(shí)復(fù)制了這一段代碼然后開始寫第一個(gè)webapp了.
這種寫法是還原設(shè)計(jì)稿,讓頁面保持和設(shè)備分辨率一樣,不做任何縮放.對(duì)于移動(dòng)web來說需要豐富經(jīng)驗(yàn)支持才能寫好一個(gè)好的響應(yīng)式頁面.高質(zhì)量的頁面效果請(qǐng)選擇此方案.
特殊寫法:
<meta name="viewport" content="target-densitydpi=device-dpi,width=640" >?簡單而粗暴的解決響應(yīng)式方案,不過弊端也比較大需要謹(jǐn)慎衡量.
target-densitydpi?這個(gè)屬性可以改變設(shè)備的默認(rèn)縮放medium-dpi是target-densitydpi的默認(rèn)值,如果我們顯式定義target-densitydpi=device-dpi,那么設(shè)備就會(huì)按照真實(shí)的dpi來渲染頁面.
如果設(shè)計(jì)稿是按照640px寬度設(shè)計(jì)的話,制作頁面的時(shí)候就按照設(shè)計(jì)稿的原始尺寸制作,頁面會(huì)默認(rèn)縮放和手機(jī)分辨率一樣的寬度顯示.會(huì)節(jié)省很多解決響應(yīng)式問題的時(shí)間.
優(yōu)點(diǎn)這么突出那么弊端呢,當(dāng)然也很突出:
對(duì)于第二點(diǎn)我沒有找到完美的解決辦法.出現(xiàn)這情況可能是target-densitydpi和device-dpi設(shè)備DPI之間的換算.選擇此方案需要放棄部分用戶,所以要衡量得失.(簡單而粗暴是有代價(jià)的,任需謹(jǐn)慎...)
小結(jié)
了解完Viewport對(duì)寫移動(dòng)web來說簡單了很多,要做的只是拿出實(shí)際行動(dòng)多寫了.對(duì)于Viewport兩種寫法可以靈活運(yùn)用,要做到的是以最精簡的HTML、CSS完成頁面呈現(xiàn).
?
補(bǔ)充
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">?minimal-ui?iOS 7.1的Safari新增的屬性在瀏覽網(wǎng)頁,滾動(dòng)之后,會(huì)觸發(fā)隱藏 location bar 和 tool bar,但是在iOS 8又給刪除了.
轉(zhuǎn)載于:https://www.cnblogs.com/gzzfans/p/4060139.html
總結(jié)
以上是生活随笔為你收集整理的HTML5之Viewport详解的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。

- 上一篇: Laravel插件推荐
- 下一篇: ios开发值json数据文件的存取