国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

移動(dòng)前端中 viewport （視口）

LiangJ / 3489人閱讀

摘要：一的概念端實(shí)際上等于瀏覽器窗口，擁有瀏覽器窗口的寬度和高度，元素使用寬度的在未手動(dòng)設(shè)置元素寬度情況下。用獲取元素本身的尺寸移動(dòng)端分為和。大小由設(shè)備本身決定。所有的縮放規(guī)則都是相對(duì)于而言的，而與多寬無(wú)關(guān)。

一、viewport的概念 PC端

viewport實(shí)際上等于瀏覽器窗口，擁有瀏覽器窗口的寬度和高度，元素使用viewport寬度的100%（在未手動(dòng)設(shè)置html元素寬度情況下）。用document.documentElement.clientWidth獲取viewport的寬度。用document.documentElement.offsetWidth獲取元素本身的尺寸

移動(dòng)端

分為visual viewport、layout viewport和ideal viewport。
關(guān)于visual viewport和layout viewport兩者解釋請(qǐng)看兩個(gè)viewport的故事（第二部分）文章的viewport板塊。關(guān)于ideal viewport的解釋請(qǐng)看Meta viewport (視口元信息標(biāo)簽)。ideal viewport大小由設(shè)備本身決定。

CSS布局，尤其是百分比寬度，是以layout viewport做為參照系來(lái)計(jì)算的。所以元素在初始情況下用的是layout viewport的寬度。

當(dāng)進(jìn)行縮放（如果你放大，屏幕上的CSS像素會(huì)變少）的時(shí)候，visual viewport(就是頁(yè)面當(dāng)前顯示在屏幕上的部分)的尺寸會(huì)發(fā)生變化，layout viewport的尺寸仍然跟之前的一樣。（如果不這樣，你的頁(yè)面將會(huì)像百分比寬度被重新計(jì)算一樣而經(jīng)常被重新布局。）

用document.documentElement.clientWidth計(jì)算layout viewport的寬度。
用window.innerWidth/Height或者document.documentElement.offsetWidth計(jì)算visual viewport的寬度
用document.documentElement.offsetWidth計(jì)算 元素的尺寸。

二、viewport meta標(biāo)簽

viewport meta標(biāo)簽用來(lái)設(shè)置layout viewport的寬度。

initial-scale=1

visual viewport width = ideal viewport width / zoom factor
設(shè)置 initial-scale這條規(guī)則實(shí)際上做了如下2件事：
1、將頁(yè)面初始縮放因子設(shè)置為給定的值，根據(jù)ideal viewport，計(jì)算得到visual viewport的寬。
2、設(shè)置layout viewport的寬等于剛剛計(jì)算出來(lái)的visual viewport的寬。
注意:對(duì)于IE，會(huì)獲取一個(gè)錯(cuò)誤的ideal viewport（320x320而不是320x480），并且會(huì)將任意值都當(dāng)作成1，所以在IE上initial-scale取什么值都無(wú)所謂。

initial-scale=1可以將 layout viewport的值設(shè)置為 ideal viewport的大小。IE10上橫屏模式和豎屏模式的寬都是豎屏?xí)rideal viewport寬度。

width=device-width

width規(guī)則下有一個(gè)特殊的值device-width，通過(guò)設(shè)置width=device-width可以將layout viewport(布局視口)的寬度等于 ideal viewport(理想視口)的寬。

在iphone和ipad上，無(wú)論是豎屏還是橫屏，寬度都是豎屏?xí)rideal viewport的寬度。

initial-scale=1與width=device-width

1、使用 width=device-width 和initial-scale=1兩個(gè)規(guī)則，可以將 layout viewport的值設(shè)置為 ideal viewport的大小。

2、所有的縮放規(guī)則都是相對(duì)于 ideal viewport而言的，而與layout viewport多寬無(wú)關(guān)。因此maximum-scale=3的含義就是頁(yè)面最多放大到 ideal viewport的3倍。

width 和 initial-scale=1

當(dāng)width 和 initial-scale=1沖突時(shí)，使用寬度最大原則(橫屏或豎屏模式下均是)來(lái)解決，即哪個(gè)寬度大用哪個(gè)。

三、設(shè)備像素與CSS像素之間的換算是如何產(chǎn)生的 每英寸像素(pixel per inch)

ppi，表示每英寸所擁有的像素(pixel)數(shù)目，數(shù)值越高，代表顯示屏能夠以越高的密度顯示圖像。ppi的計(jì)算方式可以參考維基百科每英寸像素

設(shè)備像素比(device pixel ratio)

以上計(jì)算出ppi是為了得到密度分界，獲得默認(rèn)縮放比例，即設(shè)備像素比。

上圖可知，ppi在120-160之間的手機(jī)被歸為低密度手機(jī)，160-240被歸為中密度，240-320被歸為高密度，320以上被歸為超高密度（Apple給了它一個(gè)高大上的名字——Retina）。

獲得設(shè)備像素比后，便可得知設(shè)備像素與CSS像素之間的比例。當(dāng)這個(gè)比率為1:1時(shí)，使用1個(gè)設(shè)備像素顯示1個(gè)CSS像素。當(dāng)這個(gè)比率為2:1時(shí)，使用4個(gè)設(shè)備像素顯示1個(gè)CSS像素，當(dāng)這個(gè)比率為3:1時(shí)，使用9（3*3）個(gè)設(shè)備像素顯示1個(gè)CSS像素。

四、縮放實(shí)質(zhì)

現(xiàn)代瀏覽器中實(shí)現(xiàn)縮放的方式無(wú)怪乎都是「拉伸」像素。

假設(shè)你給一個(gè)元素設(shè)置了width: 128px的屬性，并且你的顯示器是1024px寬，當(dāng)你最大化你的瀏覽器屏幕，這個(gè)元素將會(huì)在你的顯示器上重復(fù)顯示8次（大概是這樣；我們先忽略那些微妙的地方）。

如果用戶進(jìn)行縮放，那么計(jì)算方式將會(huì)發(fā)生變化。如果用戶放大到200%，那么你的那個(gè)擁有width: 128px屬性的元素在1024px寬的顯示器上只會(huì)重復(fù)顯示4次。元素的寬度并沒(méi)有從128被修改為256像素，元素仍然是128個(gè)CSS像素寬，即使它占據(jù)了256個(gè)設(shè)備像素的空間。

參考自：
兩個(gè)viewport的故事（第一部分）
兩個(gè)viewport的故事（第二部分）
Meta viewport (視口元信息標(biāo)簽)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/50362.html

相關(guān)文章

  • viewport詳解

    摘要：也發(fā)現(xiàn)了這個(gè)問(wèn)題，并且適時(shí)的出現(xiàn)，它提出了一個(gè)方案用來(lái)解決這個(gè)問(wèn)題。很明顯，的尺寸不會(huì)是一個(gè)固定的值，甚至每款設(shè)備都可能不同。而完美視口也是通過(guò)的某種設(shè)置來(lái)達(dá)到。特性通常情況下，有以下種設(shè)置。用于指定用戶能夠放大的比例。 前言 這次想聊聊移動(dòng)開(kāi)發(fā)相關(guān)的事。是的，你沒(méi)有看錯(cuò)，一句話就可以開(kāi)始你的移動(dòng)前端開(kāi)發(fā)。 你心里一定在想，什么話這么酷，能夠瞬間帶入到移動(dòng)前端開(kāi)發(fā)的世界。 但其實(shí)它一點(diǎn)...

    xfee 評(píng)論0 收藏0

  • 移動(dòng)前端中 viewport （視口）

    摘要：一的概念端實(shí)際上等于瀏覽器窗口，擁有瀏覽器窗口的寬度和高度，元素使用寬度的在未手動(dòng)設(shè)置元素寬度情況下。用獲取元素本身的尺寸移動(dòng)端分為和。大小由設(shè)備本身決定。所有的縮放規(guī)則都是相對(duì)于而言的，而與多寬無(wú)關(guān)。 一、viewport的概念 PC端 viewport實(shí)際上等于瀏覽器窗口，擁有瀏覽器窗口的寬度和高度，元素使用viewport寬度的100%（在未手動(dòng)設(shè)置html元素寬度情況下）。用d...

    only_do 評(píng)論0 收藏0

  • 茴字的四種寫(xiě)法—移動(dòng)適配方案的進(jìn)化

    摘要：是阿里團(tuán)隊(duì)開(kāi)發(fā)的前端適配方案，也是用的的方法。那么第一種方法其實(shí)已經(jīng)能解決前端適配問(wèn)題了，為什么阿里還要開(kāi)發(fā)一個(gè)呢在第一種方法中，時(shí)沒(méi)有任何問(wèn)題，但是在或者更高的手機(jī)屏幕上，因?yàn)槲锢硐袼氐脑黾?，存在小于的顯示空間。 話說(shuō)我剛工作的時(shí)候，就開(kāi)始用rem了，過(guò)了沒(méi)多久，接觸到了flexible，系統(tǒng)化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

    canger 評(píng)論0 收藏0

  • 茴字的四種寫(xiě)法—移動(dòng)適配方案的進(jìn)化

    摘要：是阿里團(tuán)隊(duì)開(kāi)發(fā)的前端適配方案，也是用的的方法。那么第一種方法其實(shí)已經(jīng)能解決前端適配問(wèn)題了，為什么阿里還要開(kāi)發(fā)一個(gè)呢在第一種方法中，時(shí)沒(méi)有任何問(wèn)題，但是在或者更高的手機(jī)屏幕上，因?yàn)槲锢硐袼氐脑黾樱嬖谛∮诘娘@示空間。 話說(shuō)我剛工作的時(shí)候，就開(kāi)始用rem了，過(guò)了沒(méi)多久，接觸到了flexible，系統(tǒng)化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

    Pocher 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<