響應(yīng)式網(wǎng)頁設(shè)計中移動設(shè)備的適配研究

邱望 鄔娜

摘要：電子和移動通信技術(shù)的迅速發(fā)展推動了智能手機(jī)、平板電腦等移動設(shè)備的大規(guī)模生產(chǎn)和普及，移動設(shè)備的屏幕不斷出現(xiàn)了新的尺寸。屏幕的尺寸會影響網(wǎng)站內(nèi)容的展示方式，開發(fā)者需要根據(jù)不同屏幕尺寸的設(shè)備進(jìn)行網(wǎng)頁的適配，這使得適配工作的工作量和難度增加。該文通過對當(dāng)前主流的移動設(shè)備進(jìn)行研究分析，總結(jié)出在響應(yīng)式網(wǎng)頁設(shè)計中不同移動設(shè)備的適配規(guī)則，提出一種可選的斷點(diǎn)設(shè)置方法，為網(wǎng)站的開發(fā)和設(shè)計人員提供參考。

關(guān)鍵詞：移動端適配;響應(yīng)式設(shè)計;斷點(diǎn);媒體查詢;網(wǎng)頁設(shè)計

中圖分類號：TP301? ? ? 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2020）16-0016-03

Abstract： The rapid development of electronic and mobile communication technologies has promoted the mass production and popularization of mobile devices such as smart phones and tablets. Mobile device screens continue to appear in new sizes， and it affects how the content of the website is displayed. Developers need to adapt the web pages to devices of different screen sizes， which increases the workload and difficulty of the adaptation work. This paper studies and analyzes the current mainstream mobile devices， summarizes the adaptation rules of different mobile devices in responsive web design， and proposes an optional breakpoint setting method. It provides a reference for the development and design of the website.

Key words： mobile adaptation; responsive design; breakpoints; media queries; web design

1 背景

隨著集成電路、芯片和移動通信技術(shù)的蓬勃發(fā)展，智能手機(jī)的產(chǎn)能越來越高，價格也越來越親民。4G（第4代移動通信技術(shù)）的全面普及和5G的逐步商用，為使用者提供了高速的數(shù)據(jù)傳輸，智能手機(jī)的用戶能夠隨時隨地地訪問各種網(wǎng)絡(luò)資源，以智能手機(jī)為代表的移動設(shè)備已經(jīng)成為人們生活中不可或缺的工具。移動設(shè)備的流行也使內(nèi)容開發(fā)者開始思考一個問題，即如何將原本顯示在寬屏幕、高分辨率的網(wǎng)頁內(nèi)容以一種更加美觀和人性化的方式展示在相對較小的屏幕上。對于所有的網(wǎng)站設(shè)計師和開發(fā)者來說，制作一個能在不同的瀏覽器和操作系統(tǒng)的所有設(shè)備中都能夠完美顯示的網(wǎng)站是一件不容易的事情，而響應(yīng)式網(wǎng)頁設(shè)計（RWD）是一個很好的解決方案[1]。

RWD由國外著名網(wǎng)頁設(shè)計師Ethan Marcotte于2010年5月所提出，是一種網(wǎng)絡(luò)頁面設(shè)計布局。RWD被定義為，一種集中創(chuàng)建頁面的排版方式，可以智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境進(jìn)行相對應(yīng)的布局。由于其在網(wǎng)頁自適應(yīng)方面具有非常好的表現(xiàn)，之后得到了進(jìn)一步的發(fā)展和創(chuàng)新，更多的人開始關(guān)注并使用RWD。

在移動設(shè)備的適配過程中，最關(guān)鍵的問題之一是如何確定斷點(diǎn)（break point）。斷點(diǎn)是一個尺寸，當(dāng)設(shè)備屏幕尺寸大于或小于斷點(diǎn)時，網(wǎng)頁會進(jìn)行響應(yīng)式變化，內(nèi)容和樣式會重新進(jìn)行布局和調(diào)整[2]。在實際的開發(fā)中，斷點(diǎn)的設(shè)置跟網(wǎng)站的內(nèi)容、用戶設(shè)備的分辨率、用戶群體的規(guī)模和成本計算都息息相關(guān)，所以這些都是應(yīng)該考慮的因素。隨著各種新設(shè)備的出現(xiàn)，手機(jī)的屏幕尺寸的規(guī)格越來越多樣，包括全面屏、水滴屏、異形屏和環(huán)繞屏（小米alpha）等，這導(dǎo)致原本開發(fā)時設(shè)置的斷點(diǎn)可能不再適用，從而影響響應(yīng)式設(shè)計的效果[3]。

為了使網(wǎng)頁在移動端上能有更好的適配效果，同時幫助網(wǎng)頁設(shè)計和開發(fā)人員能夠更好地進(jìn)行網(wǎng)頁的移動端適配，本文對響應(yīng)式網(wǎng)頁設(shè)計中移動設(shè)備（主要是智能手機(jī)）的適配問題進(jìn)行了研究，包括：

1） 移動設(shè)備的屏幕屬性與的計算關(guān)系。

2） 主流iPhone和iPad的屏幕屬性及其斷點(diǎn)設(shè)置。

3） 全面屏趨勢下，橫屏尺寸的變化對響應(yīng)式設(shè)計的影響。

2 移動設(shè)備的屏幕屬性及其計算關(guān)系。

2.1 屏幕尺寸

屏幕是手機(jī)最重要的一個部件之一，其功能是顯示圖像和色彩，尺寸大小由熒幕的對角線進(jìn)行計算，通常以英寸（inch）作單位。屏幕的材質(zhì)很大程度影響了顯示的各項表現(xiàn)，因此手機(jī)屏幕的材質(zhì)也越來越顯得重要。不同大小的屏幕顯示的內(nèi)容的尺寸也是有區(qū)別的，其單位換算規(guī)則是：

1 inch = 2.54cm = 25.4mm

圖1是常見的幾種iPhone型號的屏幕物理尺寸。而隨著制造業(yè)的迅速發(fā)展，屏幕的寬高比也發(fā)生了變化，16：9機(jī)型越來越少，5英寸左右的小屏旗艦也基本滅絕，全面屏的趨勢下18：9尺寸的屏幕開始流行，6inch以上的屏幕尺寸成了常態(tài)。

2.2 分辨率和像素密度PPI

物理像素或分辨率（pixel，px），又被稱為設(shè)備像素。每塊手機(jī)屏幕上有若干像素點(diǎn)，屏幕的分辨率為（寬像素點(diǎn)數(shù)量*高像素點(diǎn)數(shù)量），例如1080x1920。像素密度（Pixels Per Inch，PPI）是指每英寸屏幕所擁有像素的數(shù)量，即PPI越大，屏幕顯示圖像的效果越好，擬真度越高。PPI的計算方法是：

其中，X表示長度像素數(shù)，Y表示寬度像素數(shù)，Z表示屏幕尺寸。

2.3 屏幕開發(fā)尺寸pt

邏輯像素或邏輯分辨率（point， pt），是瀏覽器模擬調(diào)試移動端時各手機(jī)的像素的寬度和高度，即屏幕的開發(fā)尺寸，iPhone的頁面內(nèi)容的尺寸是按照以pt為單位進(jìn)行計算和顯示的。邏輯分辨率與屏幕的縮放因子有關(guān)，縮放因子（scale）是指一個邏輯像素包含的物理像素的數(shù)量。即：

不同的屏幕具有不同的縮放因子，因此屏幕的邏輯尺寸也會改變。在進(jìn)行移動端的適配時，開發(fā)者需要知道設(shè)備的邏輯分辨率才能進(jìn)行良好的設(shè)計和開發(fā)。

2.4 Android設(shè)備的適配

由于Android系統(tǒng)的開源性，其設(shè)備型號的數(shù)量要大大多于iPhone型號，所以在對Android設(shè)備進(jìn)行開發(fā)和適配時，不可能對每一種設(shè)備進(jìn)行適配，只能尋找最常見的屏幕尺寸和類型。

在屏幕屬性方面，Android設(shè)備與iPhone設(shè)備的原理和計算方法是相同的，但是計算單位不同有區(qū)別。Android設(shè)備中像素單位仍是px，而像素密度則是dpi，開發(fā)尺寸則是dp。iPhone和iPad代表了當(dāng)前市面上最流行的移動設(shè)備的尺寸，因此，本文僅探討iPhone和iPad的適配規(guī)則，Android設(shè)備則只需要找到相同或相似的iPhone設(shè)備進(jìn)行對應(yīng)即可，網(wǎng)頁的適配規(guī)則在這兩類設(shè)備上是相同的。

3 主流移動設(shè)備的屏幕屬性和斷點(diǎn)設(shè)置

3.1 主流移動設(shè)備的屏幕屬性

iPhone是最流行的手機(jī)產(chǎn)品之一，搭載的操作系統(tǒng)是iOS，擁有非常大的用戶群體，有安全穩(wěn)定、運(yùn)行高效和優(yōu)秀的用戶體驗等優(yōu)點(diǎn)。常見的iPhone屏幕屬性如表1所示：

3.2 媒體查詢的斷點(diǎn)設(shè)置

RWD中使用媒體查詢（@media query）來進(jìn)行響應(yīng)式布局，而其中的關(guān)鍵點(diǎn)就是設(shè)置不同屏幕尺寸分界的斷點(diǎn)[4]。由前文的分析，可以得出超小屏幕的尺寸都是小于414pt，可以將414pt作為斷點(diǎn)。但在實際的應(yīng)用中，由于手機(jī)屏幕尺寸非常多，還有很多超過414pt的設(shè)備，因此一般不會設(shè)置這樣較小的值，而是設(shè)置為平板電腦的最小尺寸，所以可以將斷點(diǎn)設(shè)置為768pt。在CSS3媒體查詢的代碼中不使用pt，而是統(tǒng)一使用px為計量單位，代碼為：

3.3 全面屏手機(jī)趨勢下橫屏對響應(yīng)式布局的影響

在全面屏流行之前，絕大多數(shù)手機(jī)正面的上下部都有較大的黑色邊框，其屏幕寬高比都是9：16，例如iPhone8 Plus的開發(fā)尺寸為414x736，這意味著如果采用前文的768px為斷點(diǎn)，那么手機(jī)在豎屏和橫屏使用時的布局是一致的[5]。圖2和圖3是iPhone8 Plus豎屏和橫屏?xí)r訪問Bootstrap官網(wǎng)的效果：

但隨著以iPhone X為代表的全面屏手機(jī)的流行，屏幕的寬高比已經(jīng)變成了9：18，這就意味著如果屏幕的寬度不變，那么手機(jī)的長度變得更長了，這將影響手機(jī)在橫屏狀態(tài)時的瀏覽布局和效果[6]。圖4和圖5是iPhoneX豎屏和橫屏?xí)r的效果：

顯然，此時橫屏狀態(tài)下手機(jī)已經(jīng)以小屏幕進(jìn)行了適配，因為水平寬度已經(jīng)超過了768px。這種情況在開發(fā)尺寸為1024 x 1366pt的iPad Pro 12.9上面也會出現(xiàn)，在橫屏?xí)r網(wǎng)頁布局將以中等屏幕的尺寸進(jìn)行適配，開發(fā)者需要對這個問題進(jìn)行考慮[7]。

本文提出兩種可能的解決思路：

1）在JS中通過window.orientation屬性禁止設(shè)備橫屏瀏覽網(wǎng)頁。

2）將超小屏幕為的斷點(diǎn)設(shè)置為814px以保證在手機(jī)的橫豎屏狀態(tài)統(tǒng)一布局。

不同的網(wǎng)站內(nèi)容也會影響斷點(diǎn)的設(shè)置和響應(yīng)式布局方式，在具體的開發(fā)中應(yīng)當(dāng)根據(jù)產(chǎn)品的實際情況做出取舍和平衡，在盡可能多的設(shè)備上進(jìn)行測試和實驗，以達(dá)到最佳的顯示效果。

4 結(jié)束語

互聯(lián)網(wǎng)技術(shù)的迅猛發(fā)展促進(jìn)了軟件內(nèi)容開發(fā)的多樣化，移動設(shè)備的差異化使得用戶和開發(fā)者對移動端的網(wǎng)頁內(nèi)容有了更高的要求。針對Web App在移動設(shè)備的適配問題，本文研究了當(dāng)前主流設(shè)備的特點(diǎn)，總結(jié)了其規(guī)律，找到了響應(yīng)式設(shè)計中斷點(diǎn)的設(shè)置規(guī)則。同時指出流行的全面屏對響應(yīng)式設(shè)計的影響，為Web App開發(fā)者提供了新的一種思路和可能的解決方案。

參考文獻(xiàn)：

[1] 陳益全， 吳多智. 斷點(diǎn)在響應(yīng)式網(wǎng)頁設(shè)計中的應(yīng)用研究[J]. 微型電腦應(yīng)用， 2016， 32（5）： 41-43.

[2] 舒后， 熊一帆， 葛雪嬌. 基于Bootstrap框架的響應(yīng)式網(wǎng)頁設(shè)計與實現(xiàn)[J]. 北京印刷學(xué)院學(xué)報， 2016， 24（2）： 47-52.

[3] 戴慧萍. 響應(yīng)式設(shè)計對網(wǎng)頁界面的影響[J]. 藝術(shù)教育， 2015（1）： 250.

[4] 畢劍， 劉曉艷， 張禹. 使用響應(yīng)式網(wǎng)頁設(shè)計構(gòu)建圖書館移動門戶網(wǎng)站——以云南大學(xué)圖書館為例[J]. 現(xiàn)代圖書情報技術(shù)， 2015（2）： 97-102.

[5] 李穎. 基于響應(yīng)式設(shè)計的Web App界面布局研究[J]. 安慶師范大學(xué)學(xué)報（自然科學(xué)版）， 2017， 23（3）： 62-67.

[6] 陳曦. 面向多設(shè)備響應(yīng)式設(shè)計的機(jī)制研究[D]. 北京： 北京郵電大學(xué)， 2015.

[7] 陳靜. 基于響應(yīng)式Web設(shè)計手機(jī)圖書館服務(wù)應(yīng)用探討[J]. 圖書館工作與研究， 2015（4）： 33-36.

【通聯(lián)編輯：謝媛媛】