邱望 鄔娜

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

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

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

文章編號(hào)：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 背景

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

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

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

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

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

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

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

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

2.1 屏幕尺寸

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

1 inch = 2.54cm = 25.4mm

圖1是常見的幾種iPhone型號(hào)的屏幕物理尺寸。而隨著制造業(yè)的迅速發(fā)展，屏幕的寬高比也發(fā)生了變化，16：9機(jī)型越來越少，5英寸左右的小屏旗艦也基本滅絕，全面屏的趨勢(shì)下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的計(jì)算方法是：

其中，X表示長(zhǎng)度像素?cái)?shù)，Y表示寬度像素?cái)?shù)，Z表示屏幕尺寸。

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

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

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

2.4 Android設(shè)備的適配

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

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

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

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

iPhone是最流行的手機(jī)產(chǎn)品之一，搭載的操作系統(tǒng)是iOS，擁有非常大的用戶群體，有安全穩(wěn)定、運(yùn)行高效和優(yōu)秀的用戶體驗(yàn)等優(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)。但在實(shí)際的應(yīng)用中，由于手機(jī)屏幕尺寸非常多，還有很多超過414pt的設(shè)備，因此一般不會(huì)設(shè)置這樣較小的值，而是設(shè)置為平板電腦的最小尺寸，所以可以將斷點(diǎn)設(shè)置為768pt。在CSS3媒體查詢的代碼中不使用pt，而是統(tǒng)一使用px為計(jì)量單位，代碼為：

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

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

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

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

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

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

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

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

4 結(jié)束語

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

參考文獻(xiàn)：

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

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

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

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

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

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

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

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