關(guān)于移動(dòng)設(shè)備頁(yè)面尺寸參數(shù)和viewport的理解

時(shí)間：2022-05-28 10:48:01 | 來(lái)源：網(wǎng)絡(luò)營(yíng)銷(xiāo)

時(shí)間：2022-05-28 10:48:01 來(lái)源：網(wǎng)絡(luò)營(yíng)銷(xiāo)

剛開(kāi)始接觸移動(dòng)設(shè)備的時(shí)候，碰到的最多的就是尺寸和適配的問(wèn)題，目前網(wǎng)站開(kāi)發(fā)已經(jīng)更多的轉(zhuǎn)向移動(dòng)端設(shè)計(jì)和制作，更多的人開(kāi)始詢(xún)問(wèn)移動(dòng)端網(wǎng)頁(yè)寬度多少合適？960px、640px、480px、320px？圖片多少寬度適合？比如用640px的圖片寬度設(shè)置為320px是否比較清晰？

為移動(dòng)設(shè)備制作前端頁(yè)面，往往會(huì)遇到很多令人迷惑的情況，本文中，我整理了一些移動(dòng)設(shè)備頁(yè)面尺寸參數(shù)和viewport相關(guān)的概念和知識(shí)，在此，借助億企邦的平臺(tái)與大家分享一下。

1、設(shè)備像素和CSS像素

CSS像素是固定不變的，瀏覽器上縮放的話(huà)，CSS像素會(huì)被拉伸或者縮小，設(shè)備像素不變。

100%zoom：css像素和設(shè)備像素一致

zoom被縮放：css像素在設(shè)備像素里被縮放



2、屏幕尺寸和窗口尺寸

屏幕尺寸和窗口尺寸較好理解，如下圖所示：



但是需要注意的是：當(dāng)縮放窗口的時(shí)候，窗口尺寸更改了，這一點(diǎn)對(duì)于后面理解移動(dòng)端尺寸有一定幫助。

解釋?zhuān)寒?dāng)放大頁(yè)面的時(shí)候，窗口尺寸變小了，為什么呢？因?yàn)榇翱诔叽?window.innerWidth)的定義是窗口里能展現(xiàn)的像素寬高，頁(yè)面放大了，頁(yè)面里展現(xiàn)的css像素變少了，所以窗口尺寸變小了，相反縮小頁(yè)面的時(shí)候，窗口尺寸變大了（具體可查看億企邦《詳解移動(dòng)端設(shè)備頁(yè)面尺寸設(shè)計(jì)原理》的相關(guān)介紹）。

3、關(guān)于手機(jī)屏幕的參數(shù)

大家經(jīng)常會(huì)聽(tīng)到一些關(guān)于手機(jī)的技術(shù)參數(shù)，比如lumia920采用4.5英寸1280×760分辨率的屏幕，PPI高達(dá)xxx(具體多少?zèng)]算)！到底是什么意思呢？

首先，4.5英寸是多大？大家可以看到我自己繪制的一副圖（如下圖），圖中里面那圈是3.5英寸的屏幕大小，外面一圈是4.5英寸的屏幕大小，當(dāng)然我是以魅族m9的屏幕長(zhǎng)寬比基礎(chǔ)上放大得到的，實(shí)際上，不同手機(jī)的分辨率不同會(huì)導(dǎo)致屏幕長(zhǎng)寬比不一樣，但是屏幕面積是固定的，4.5英寸屏幕的面積是3.5英寸的1.7倍。

有人會(huì)問(wèn)：這3.5英寸是如何算出來(lái)的？答案是量出來(lái)的，1英寸=2.54cm，關(guān)于英制單位，咱們常用到的還有英尺，1英尺=0.3048m（延伸：4.3英寸是多大？）。

接下來(lái)，再跟大家介紹一下手機(jī)屏幕的幾個(gè)參數(shù)：屏幕大小、分辨率、PPI，如下圖所示：

還有一個(gè)就是大家常所說(shuō)的ppi，搞打印的應(yīng)該經(jīng)常聽(tīng)說(shuō)這個(gè)詞，咱們平時(shí)打印的紙張好像都是300ppi，喬布斯所說(shuō)的視網(wǎng)膜屏幕就是指ppi超過(guò)300，達(dá)到人肉眼無(wú)法辨別的程度。

那PPI是什么意思？其實(shí)就是指沒(méi)英寸屏幕上面的像素?cái)?shù)，那到底是如何算出來(lái)的呢？咱所說(shuō)的960×640分辨率，其算法就是：根據(jù)勾股定理算出對(duì)角線的像素?cái)?shù)，然后再除以3.5，得出的數(shù)就是ppi，根據(jù)這個(gè)算法，我們可以看出如果要提高ppi，要么是減少屏幕尺寸，要么是增加屏幕分辨率！

咱們電腦顯示屏一般的ppi都是在100左右，大家用慣了手機(jī)屏幕之后會(huì)發(fā)現(xiàn)電腦屏幕不堪入目，雖然說(shuō)手機(jī)的高ppi是因?yàn)槲覀兪墙嚯x觀看，電腦屏幕是遠(yuǎn)距離觀看，但是區(qū)別還是挺明顯的。

大家的屏幕都可以調(diào)節(jié)分辨率，分辨率越小，最明顯的感覺(jué)就是字變大了！反之，字變小了。

一般來(lái)說(shuō)，根據(jù)顯示器的不同，大多數(shù)電腦都可在800×600到1920×1080之間調(diào)節(jié)，通常情況下，我還是喜歡用高分辨率，這樣看起來(lái)顯得畫(huà)面更細(xì)膩點(diǎn)，主要還是因?yàn)閜pi比較高，比較適合我這種和電腦坐的比較近的人，現(xiàn)在大部分手機(jī)屏幕的ppi都在300以上，電腦和平板以后也是這個(gè)趨勢(shì)。

4、viewport的使用

近年來(lái)，隨著移動(dòng)端的快速發(fā)展，越來(lái)越多傳統(tǒng)的web應(yīng)用需要適配移動(dòng)終端，下面簡(jiǎn)單的跟大家介紹一下viewport的使用問(wèn)題。

（1）、pc上的viewport

viewport并非是移動(dòng)端的專(zhuān)利，viewport是瀏覽器內(nèi)部的一個(gè)數(shù)據(jù)，它約束html的寬度。

viewport基本等同于窗口尺寸，所以當(dāng)你縮放窗口的時(shí)候viewport會(huì)改變，相應(yīng)的html寬度也會(huì)改變。

這個(gè)例子中，由于放大頁(yè)面，viewport變小，而頁(yè)面中的頭部藍(lán)條css設(shè)置為100%，跟隨viewport變化，所以右側(cè)logo暴露了出來(lái)，藍(lán)條沒(méi)有覆蓋100%的文檔寬度，而只取viewport的寬度。

（2）、移動(dòng)終端的viewport

移動(dòng)終端的viewport更加麻煩一些，有兩種viewport，分別是展示viewport(visual viewport)和布局viewport(layout viewport)。

上面這張圖片你可以這么理解：手機(jī)是一個(gè)放大鏡，它游走在頁(yè)面上，手機(jī)上展示的寬高為visual-viewport，而整個(gè)頁(yè)面的寬高是layout-viewport。

好奇的朋友一定會(huì)問(wèn)，為什么要這樣呢？何必這么麻煩？這是因?yàn)槭謾C(jī)的尺寸太小了，“移動(dòng)瀏覽器廠商想給它們的客戶(hù)盡可能的提供最好的體驗(yàn)，這現(xiàn)在指的就是「盡可能的跟桌面一樣」，因此耍一些花招是必要的。”

那么，假如我的頁(yè)面沒(méi)有經(jīng)過(guò)任何優(yōu)化，手機(jī)默認(rèn)的layout-viewport是多大呢，“layout viewport有多寬？每個(gè)瀏覽器都不一樣，Safari iPhone為980px，Opera為850px，Android WebKit為800px，最后IE為974px。”

這就是為什么普通一個(gè)頁(yè)面在iphone上看會(huì)變得很大的原因，iphone默認(rèn)把你的頁(yè)面的viewport設(shè)置為980px，也就是說(shuō)html的100%寬度默認(rèn)為980px。

（3）、現(xiàn)代移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)與viewport

雖說(shuō)visual-viewport是為了用戶(hù)看得更清楚而做的設(shè)定，但實(shí)際上，這帶來(lái)了用戶(hù)體驗(yàn)上的下降，用戶(hù)往往需要縮放和移動(dòng)頁(yè)面，所以現(xiàn)代針對(duì)移動(dòng)端的網(wǎng)頁(yè)設(shè)計(jì)（或者響應(yīng)式設(shè)計(jì)）通常采用的方法是，精簡(jiǎn)頁(yè)面內(nèi)容，放大視覺(jué)元素，避免體驗(yàn)不好的縮放和移動(dòng)頁(yè)面，包括boostrap在內(nèi)的眾多前端框架也無(wú)不在設(shè)計(jì)上采用這種解決方案。

要滿(mǎn)足這種設(shè)計(jì)，首先要保證一件事情就是，讓layout-viewport就是visual-viewport，消除兩個(gè)viewport帶來(lái)的頁(yè)面差異。

蘋(píng)果公司推動(dòng)的的viewport meta可以解決這個(gè)問(wèn)題，viewport的主要作用是指定layout-viewport的大小。

比如：<meta name="viewport" content="width=device-width">這個(gè)設(shè)定其實(shí)就是讓layout-viewport和visual-viewport保持一致，回想一下上面那張把手機(jī)當(dāng)做放大鏡的圖片，有了這個(gè)設(shè)定以后，手機(jī)就不是放大鏡了，而是把整個(gè)頁(yè)面裝在手機(jī)里。

此外，viewport還可以設(shè)置initial-scale，user-scalable

5、蘋(píng)果給的一些例子

關(guān)于Viewport，safari的開(kāi)發(fā)官網(wǎng)給了一些例子，可以加深我們對(duì)這個(gè)問(wèn)題的理解：





可以看到?jīng)Q定頁(yè)面展示效果的兩個(gè)因素，width和scale，scale類(lèi)似pc端的放大縮小。

一個(gè)默認(rèn)寬度為100%頁(yè)面的樣子，如下圖所示：

默認(rèn)寬度 + initial scale = 1.0，如下圖所示：

寬度設(shè)為320 + 默認(rèn) initial scale，如下圖所示：

手機(jī)瀏覽器是把頁(yè)面放在一個(gè)虛擬的窗口-viewport中的，通常情況下，這個(gè)虛擬的窗口比屏幕寬，這樣就不用吧每個(gè)網(wǎng)頁(yè)擠到很小的窗口中（這樣會(huì)破壞沒(méi)有針對(duì)手機(jī)瀏覽器優(yōu)化的網(wǎng)頁(yè)的布局），此時(shí)雖然顯示不完全，但是用戶(hù)仍可以通過(guò)平移和縮放來(lái)看網(wǎng)頁(yè)的內(nèi)容。

viewport就是讓網(wǎng)頁(yè)開(kāi)發(fā)者通過(guò)其大小，動(dòng)態(tài)的設(shè)置其網(wǎng)頁(yè)內(nèi)容中控件元素的大小，從而使得在瀏覽器上實(shí)現(xiàn)和web網(wǎng)頁(yè)中相同的效果（比例縮小）。

當(dāng)然，更加優(yōu)秀的做法是類(lèi)似天貓的做法：針對(duì)手機(jī)端重新進(jìn)行頁(yè)面設(shè)計(jì)、布局，因?yàn)槭謾C(jī)屏幕畢竟有限，按照web頁(yè)面等比縮小的方式較之最原始有改進(jìn)，但是如何在小屏幕上展示最合適的內(nèi)容給用戶(hù)的設(shè)計(jì)才是最貼切的。

不過(guò)對(duì)于一些沒(méi)有太多要求的，可以簡(jiǎn)單的通過(guò)viewport實(shí)現(xiàn)適配。

億企邦點(diǎn)評(píng)：

由于手機(jī)系統(tǒng)各異，手機(jī)的屏幕尺寸五花八門(mén)，屏幕的性能也呈現(xiàn)多樣性，還有觸摸屏和非觸屏的區(qū)分，這四個(gè)變量結(jié)合起來(lái)，會(huì)有無(wú)數(shù)種不同的情況，如何能使你的應(yīng)用完美地展現(xiàn)給用戶(hù)，適配固然很重要，但是，更重要的是你要在適配之前，確定應(yīng)用的目標(biāo)群體也很重要啦，一定要選擇適合自己的。