移動端適配之三：使用meta標簽設置viewport

Andrman 發布于2019-08-30 15:44 / 2067人閱讀

摘要：現在開始，用標簽來設置。回到應用場景，我們用這個標簽的主要目的是做移動端的適配，一般都是做一個專門為移動端設計的頁面。利用這個，就是用來設置的寬度。小結用的目的，是為了設置的大小，從而保證能在移動端設備上合適的顯示出來。

前兩篇博客，把像素和viewport的概念講清楚了。現在開始，用meta標簽來設置viewport。

meta標簽

meta標簽里面的內容，主要是提供關于這個HTML頁面的元信息的。簡單點說，就是你用這些信息來告訴瀏覽器，應該如何解析這個HTML文件。比如

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

當然，除了上面這種簡單的格式外，meta標簽更常見的是這種name + content的形式：

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

viewport的設置

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

先介紹一下這幾個屬性：

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

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

需求已經明確了，接下來看看我們如何利用上面表里的屬性來實現。

利用width

這個width，就是用來設置layout viewport的寬度。我們設置其值為device-width，也就是設置成設備的實際寬度。而ideal viewport的寬度是與設備的寬度相等的，所以，這句代碼就把viewport設置成了ideal viewport的大小。可以分別用window.innerWidth和document.document.clientWidth查看：

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

利用scale

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

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

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

initial-scale=1.0

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

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

initial-scale=0.5

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

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

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

initial-scale=2.0

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

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

同時使用

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

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

小結

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

GPU云服務器云服務器移動端適配移動端適配方案移動端適配 js meta標簽

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116352.html

移動端適配

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

DobbyKim 2019-08-29 14:07 評論0 收藏0
移動端適配

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

Ververica 2019-08-21 18:27 評論0 收藏0
Web移動開發基本概念

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

vvpale 2019-08-19 17:36 評論0 收藏0
Web移動開發基本概念

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

ivan_qhz 2019-08-30 12:45 評論0 收藏0