響應式網頁設計中移動設備的適配研究

邱望 鄔娜

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

關鍵詞：移動端適配;響應式設計;斷點;媒體查詢;網頁設計

中圖分類號：TP301? ? ? 文獻標識碼：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 背景

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

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

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

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

1） 移動設備的屏幕屬性與的計算關系。

2） 主流iPhone和iPad的屏幕屬性及其斷點設置。

3） 全面屏趨勢下，橫屏尺寸的變化對響應式設計的影響。

2 移動設備的屏幕屬性及其計算關系。

2.1 屏幕尺寸

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

1 inch = 2.54cm = 25.4mm

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

2.2 分辨率和像素密度PPI

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

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

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

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

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

2.4 Android設備的適配

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

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

3 主流移動設備的屏幕屬性和斷點設置

3.1 主流移動設備的屏幕屬性

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

3.2 媒體查詢的斷點設置

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

3.3 全面屏手機趨勢下橫屏對響應式布局的影響

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

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

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

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

1）在JS中通過window.orientation屬性禁止設備橫屏瀏覽網頁。

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

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

4 結束語

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

參考文獻：

[1] 陳益全， 吳多智. 斷點在響應式網頁設計中的應用研究[J]. 微型電腦應用， 2016， 32（5）： 41-43.

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

[3] 戴慧萍. 響應式設計對網頁界面的影響[J]. 藝術教育， 2015（1）： 250.

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

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

[6] 陳曦. 面向多設備響應式設計的機制研究[D]. 北京： 北京郵電大學， 2015.

[7] 陳靜. 基于響應式Web設計手機圖書館服務應用探討[J]. 圖書館工作與研究， 2015（4）： 33-36.

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