成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動端適配之三：使用meta標(biāo)簽設(shè)置viewport

Andrman / 2091人閱讀

摘要：現(xiàn)在開始，用標(biāo)簽來設(shè)置?；氐綉?yīng)用場景，我們用這個標(biāo)簽的主要目的是做移動端的適配，一般都是做一個專門為移動端設(shè)計的頁面。利用這個，就是用來設(shè)置的寬度。小結(jié)用的目的，是為了設(shè)置的大小，從而保證能在移動端設(shè)備上合適的顯示出來。

前兩篇博客，把像素和viewport的概念講清楚了。現(xiàn)在開始，用meta標(biāo)簽來設(shè)置viewport。

meta標(biāo)簽

meta標(biāo)簽里面的內(nèi)容，主要是提供關(guān)于這個HTML頁面的元信息的。簡單點說，就是你用這些信息來告訴瀏覽器，應(yīng)該如何解析這個HTML文件。比如

這個標(biāo)簽是告訴瀏覽器，該HTML文件的字符編碼格式是utf-8。當(dāng)瀏覽器解析該HTML文件時，由于meta標(biāo)簽位于頭部，會先獲取到這個信息，然后瀏覽器就用這個utf-8編碼來解析這個HTML文件中的字符。

當(dāng)然，除了上面這種簡單的格式外，meta標(biāo)簽更常見的是這種name + content的形式：

name屬性的值告訴瀏覽器，這個meta標(biāo)簽設(shè)置的是format-detection，其具體值是content中的telephone=no，即忽略將數(shù)字識別成電話號碼。

viewport的設(shè)置

上一篇博客的最后已經(jīng)提到，我們所做的適配，就是要調(diào)整layout viewport的大小，而用meta標(biāo)簽就可以調(diào)整layout viewport的大小。上網(wǎng)去搜移動端適配，一定會看到下面這句代碼：

先介紹一下這幾個屬性：

屬性名 說明
width 設(shè)置layout viewport的寬度，為一個正整數(shù)，或字符串width-device
initial-scale 設(shè)置頁面的初始縮放值，為一個數(shù)字，可以帶小數(shù)
minimum-scale 允許用戶的最小縮放值，為一個數(shù)字，可以帶小數(shù)
maximum-scale 允許用戶的最大縮放值，為一個數(shù)字，可以帶小數(shù)
height 設(shè)置layout viewport的高度，這個屬性對我們并不重要，很少使用
user-scalable 是否允許用戶進(jìn)行縮放，值為"no"或"yes", no 代表不允許，yes代表允許
target-densitydpi 值可以為一個數(shù)值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 這幾個字符串中的一個。安卓中支持，當(dāng) target-densitydpi=device-dpi 時， css中的1px會等于物理像素中的1px。

回到應(yīng)用場景，我們用這個標(biāo)簽的主要目的是做移動端的適配，一般都是做一個專門為移動端設(shè)計的頁面。所以，我們在設(shè)置layout viewport時，當(dāng)然希望這個viewport的尺寸等于ideal viewport。

需求已經(jīng)明確了，接下來看看我們?nèi)绾卫蒙厦姹砝锏膶傩詠韺崿F(xiàn)。

利用width

這個width，就是用來設(shè)置layout viewport的寬度。我們設(shè)置其值為device-width，也就是設(shè)置成設(shè)備的實際寬度。而ideal viewport的寬度是與設(shè)備的寬度相等的，所以，這句代碼就把viewport設(shè)置成了ideal viewport的大小?？梢苑謩e用window.innerWidth和document.document.clientWidth查看：

當(dāng)然，只要你高興，也可以設(shè)置成別的值，比如把寬度設(shè)置成1000，那么layout viewport就會比visual viewport大，瀏覽時會有一個滾動條。具體實現(xiàn)時，代碼上最好加上initial-scale=1.0，防止瀏覽器對頁面進(jìn)行縮放。

利用scale

Initial-scale用來設(shè)置初次加載頁面時layout viewport相對于ideal viewport的大小。具體計算公式是：

layout viewport = ideal viewport / scale
scale = ideal viewport / layout viewport

需要注意的是，利用scale設(shè)置，無論計算出來的layout viewport的值大小如何，最后都會被瀏覽器自動縮放到與visual viewport大小相等，并不會出現(xiàn)滾動條。具體看下面的例子，我們設(shè)置的紅框大小為100x100px，字體大小為32px。

initial-scale=1.0

設(shè)置scale值為1.0，那么layout viewport的大小與ideal viewport大小相等：

此時紅框顯示出來的大小就是100px，字體大小也就是32px。

initial-scale=0.5

設(shè)置scale值為0.5，那么layout viewport的大小就是ideal viewport的兩倍，即750px：

但是瀏覽器會把layout viewport進(jìn)行縮放，從而達(dá)到與visual viewport大小適配。對于已經(jīng)是visual viewport750px的layout viewport，需要縮放到以前的0.5倍，才能正好適配375px。所以，100px的紅框看起來只會有50px的大小，字體也會對應(yīng)的縮小一半。如果設(shè)計圖的大小是750px，那么樣式大小完全可以按照設(shè)計圖來寫，最后只要設(shè)置scale為0.5，視覺上的效果就是縮小后的。

這里用window.innerWidth打印出來的visual viewport大小不對，用screen.width打印出來是對的，具體原因網(wǎng)上也沒查到。有知道的同學(xué)歡迎在評論區(qū)留言~

initial-scale=2.0

設(shè)置scale的值為2，那么layout viewport的大小就是ideal viewport的一半，即188px：

同樣的，瀏覽器會自動縮放。本來是188px的layout viewport，需要放大兩倍，才能填滿visual viewport。此時，100px的紅框會被放大成200px，字體大小會放大到64px。

同時使用

width和scale兩種方式都可以實現(xiàn)，但是兼容性不同。我們的目的，是為了把layout viewport設(shè)置成ideal viewport的帶下。為了能兼容所有的設(shè)備，就有了下面的方案：

如果兩者設(shè)置的大小不一樣，那么會取較大者。設(shè)置width為device-width，然后再設(shè)置縮放值為1，就完全限制了layout viewport的大小為visual viewport了。其他的屬性，都是來控制縮放的。其實，設(shè)置了maximum-scale=1.0, minimum-scale=1.0就相當(dāng)于設(shè)置了user-scalable=no了。如果不禁用縮放，那么layout的viewport的大小在縮放時還是會變的。

小結(jié)

用viewport的目的，是為了設(shè)置layout viewport的大小，從而保證能在移動端設(shè)備上合適的顯示出來。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116352.html

相關(guān)文章

  • 移動端適配

    摘要：三種因為手機(jī)的分辨率越來越大，為了讓手機(jī)顯示電腦瀏覽器的網(wǎng)頁正常，瀏覽器默認(rèn)情況下把設(shè)為或者，這樣即使是那些為桌面設(shè)計的網(wǎng)站也能在移動瀏覽器上正常顯示，這就是，它的寬度可以通過。 meta viewport viewport的概念 移動設(shè)備上面的viewport就是設(shè)備上的屏幕用來顯示網(wǎng)頁的那塊區(qū)域，叫做視口，但是在默認(rèn)情況下，移動設(shè)備上的viewport是要大于瀏覽器可視區(qū)域的，因為...

    DobbyKim 評論0 收藏0

  • 移動端適配

    摘要：三種因為手機(jī)的分辨率越來越大，為了讓手機(jī)顯示電腦瀏覽器的網(wǎng)頁正常，瀏覽器默認(rèn)情況下把設(shè)為或者，這樣即使是那些為桌面設(shè)計的網(wǎng)站也能在移動瀏覽器上正常顯示，這就是，它的寬度可以通過。 meta viewport viewport的概念 移動設(shè)備上面的viewport就是設(shè)備上的屏幕用來顯示網(wǎng)頁的那塊區(qū)域，叫做視口，但是在默認(rèn)情況下，移動設(shè)備上的viewport是要大于瀏覽器可視區(qū)域的，因為...

    Ververica 評論0 收藏0

  • Web移動開發(fā)基本概念

    摘要：移動客戶端的開發(fā)類型原生，也就是完全使用移動設(shè)備系統(tǒng)語言寫的客戶端，就是純，安卓就是純就是用戶看到的界面體驗到的交互都是原生的。 前端是個很大的概念，我的理解是用戶能夠看到，直接接觸到的層面都算是前端，比如IOS客戶端界面，安卓客戶端界面，網(wǎng)頁界面，甚至PC/MAC 桌面端軟件界面；現(xiàn)在最常見的說法一般是指Web前端，也就是針對于網(wǎng)頁端開發(fā)的工作。 Web App就是以瀏覽器作為客戶端...

    vvpale 評論0 收藏0

  • Web移動開發(fā)基本概念

    摘要：移動客戶端的開發(fā)類型原生，也就是完全使用移動設(shè)備系統(tǒng)語言寫的客戶端，就是純，安卓就是純就是用戶看到的界面體驗到的交互都是原生的。 前端是個很大的概念，我的理解是用戶能夠看到，直接接觸到的層面都算是前端，比如IOS客戶端界面，安卓客戶端界面，網(wǎng)頁界面，甚至PC/MAC 桌面端軟件界面；現(xiàn)在最常見的說法一般是指Web前端，也就是針對于網(wǎng)頁端開發(fā)的工作。 Web App就是以瀏覽器作為客戶端...

    ivan_qhz 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<