如何測試響應式網(wǎng)站設計跨瀏覽器兼容性？

　　HTML是一種固有的流動媒介。文本和容器在水平和垂直方向上展開以使用可用空間。這種流動性使復雜的設計變得更加困難，因此在千禧年之初，許多站點都根據(jù)流行的屏幕尺寸采用了固定寬度。

　　隨著屏幕尺寸從800×600增加到1024×768甚至更大，該過程仍然可行。但是，智能手機的興起和2007年推出的iPhone扭轉(zhuǎn)了這一趨勢。如今，超過一半的用戶在較小的移動設備上訪問網(wǎng)頁。

　　注意：從技術上講，智能手機通常比許多顯示器具有更高的分辨率，但是單個像素變得不可見。iPhone 11 Max將其2688 x 1242的硬件分辨率轉(zhuǎn)換為更實用的896×414邏輯分辨率。每個邏輯像素映射到3×3實際像素的網(wǎng)格，這使字體更平滑并增加了圖像細節(jié)。

　　最初的解決方法是兩個站點：一個用于桌面，一個用于移動，通常需要偵聽用戶代理以進行重定向。隨著各種設備呈指數(shù)增長，這很快變得不切實際。

　　最后，術語“響應式網(wǎng)頁設計(RWD)”由Ethan Marcotte在2010年提出。該技術使同一個站點可以在任何設備上工作，而不管屏幕尺寸或視口尺寸如何。

　　RWD如何工作?

　　沒有單一的RWD方法或技術。

　　首先，您必須確定站點設計如何對不同尺寸的顯示器做出反應。這是一個挑戰(zhàn)，許多首批RWD網(wǎng)站采用了現(xiàn)有的桌面布局，并隨著屏幕尺寸的減小而刪除了部分內(nèi)容。

　　更好的技術是移動技術。它始于線性移動視圖，可在所有設備上使用，然后隨著更多空間和受支持的瀏覽器功能可用而重新排列或改編內(nèi)容。最近，許多站點采用了更簡單的布局，其中移動和桌面體驗基本相似。

　　RWD的典型示例是漢堡菜單。屏幕較小的用戶可以單擊圖標來查看導航鏈接，而屏幕較大的用戶可以在水平列表中查看所有選項。

　　以下各節(jié)提供了許多技術實施選項。

　　HTML viewport元標記

　　無論采用哪種RWD技術，都必須在HTML中設置以下標記：

　　該width=device-width設置可確保移動瀏覽器將邏輯CSS像素縮放到屏幕的寬度。否則，瀏覽器將假定它正在呈現(xiàn)一個桌面站點并相應地縮放它，以便可以對其進行平移和縮放。

　　媒體查詢

　　媒體查詢是第一個RWD網(wǎng)站的主要基礎。它們允許CSS定位視口尺寸的特定范圍。例如：

　　/* styles applied to all views */p {font-size: 1rem;} /* styles applied to viewports with a width between 900px and 1200px */ @media (min-width: 900px) and (max-width: 1200px) {p {font-size: 1.5rem;} }

　　盡管現(xiàn)在可以使用不太明確的選項，但仍使用媒體查詢。

　　元素

　　HTML元素使用媒體查詢語法從多個選項中控制顯示哪個圖像。這通常用于藝術指導，以顯示適合設備視口的圖像。例如：

　　CSS視口單位

　　的vw和vhCSS單元分別表示視口的高度和寬度的1%。vmin是最小尺寸的vmax1%，是最大尺寸的1%。

　　這些允許RWD靈活性，特別是與結(jié)合使用時calc。例如：

　　/* font size increases with viewport width */ p { font-size: 1rem + 0.5vw; }

　　CSS列

　　CSS多列布局提供了一種隨著容器尺寸增加而創(chuàng)建多個文本列的方法。例如：

　　/* columns must be a minimum width of 12rem with a gap of 2rem between each */ .container { columns: 12rem auto; column-gap: 2rem; }

　　CSS Flexbox和網(wǎng)格

　　CSS Flexbox和CSS Grid提供了現(xiàn)代技術，可根據(jù)子元素的內(nèi)容和可用空間對子元素進行布局。主要區(qū)別：

　　Flexbox用于一維布局。元素可以根據(jù)需要包裝(或不包裝)到下一行，因此列可能不對齊。

　　網(wǎng)格用于二維布局，通常具有可識別的行和列。

　　可以用來創(chuàng)建內(nèi)部布局。本質(zhì)上，無需視媒體查詢即可根據(jù)視口尺寸調(diào)整元素的大小。例如：

　　.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); grid-gap: 1rem;}

　　JavaScript RWD選項

　　JavaScript也可以用于確定視口尺寸并做出相應的反應。例如：

　　// get viewport width and heightconstvw = window.innerWidth,vh = window.innerHeight;

　　類似地，盡管getBoundingClientRect()方法可以返回更多信息，包括像素的分數(shù)，但是可以使用offsetWidth和offsetHeight檢查單個元素的尺寸：

　　const element = document.getElementById('myelement'),rect = element.getBoundingClientRect(),ew = rect.width,eh = rect.height;

　　窗口和元素的尺寸可以隨著設備旋轉(zhuǎn)或調(diào)整瀏覽器窗口的大小而改變。該matchMediaAPI可以解析CSS媒體查詢并觸發(fā)更改事件：

　　// media queryconst mql = window.matchMedia('(min-width: 600px)');// initial check mqTest(mql); // call mqTest when media query changes mql.addListener(mqTest); // media query testing function function mqTest(e) { if (e.matches) { console.log('viewport is at least 600px width'); } else { console.log('viewport is less than 600px width'); }}

　　瀏覽器支持

　　首先，RWD技術提供了良好的瀏覽器支持。當前使用的最新瀏覽器中，有近95%支持最新的CSS網(wǎng)格選項。但是，仍然有必要在各種設備，分辨率和瀏覽器上測試您的網(wǎng)站……

　　瀏覽器內(nèi)測試

　　調(diào)整瀏覽器窗口的大小是幾個小時的合理測試策略，但是它很快變得不準確且麻煩。大多數(shù)瀏覽器都提供了響應式設計模式，使您可以選擇設備和用戶代理，對其進行旋轉(zhuǎn)，選擇分辨率，更改像素密度，調(diào)節(jié)帶寬，模擬觸摸并拍攝屏幕截圖。

　　在Firefox中，從Web Developer菜單中選擇“響應式設計模式”或按Ctrl|Cmd+Shift+M。

　　在基于Chromium的瀏覽器中，從“更多工具”菜單中打開“開發(fā)者”工具，或按Ctrl|Cmd+Shift+I，然后單擊切換設備工具欄圖標，切換回瀏覽器選項卡以查看調(diào)整大小的站點。

　　在Safari中，從瀏覽器“偏好設置”的“高級”標簽中啟用“在菜單欄中顯示開發(fā)菜單”選項。加載頁面，然后從“開發(fā)”菜單中選擇“進入響應設計模式” 。

　　但是，請注意，這些工具僅模仿設備的屏幕尺寸和用戶代理。他們無法準確模擬以下內(nèi)容：

　　渲染能力瀏覽器將使用其自己的呈現(xiàn)引擎-而不是模擬設備的呈現(xiàn)引擎。Firefox的CSS功能可以在其模擬的iPhone視圖上“工作”，而無需實際支持。也就是說，Chrome桌面將顯示出與Android Chrome相當?shù)慕浦担鴐acOS Safari將類似于iPhone，因為它們基于相同的渲染引擎。

　　較舊的設備在最新版本的Safari上測試iPhone瀏覽器視圖無法正確表示具有舊版操作系統(tǒng)和軟件的舊設備。

　　高密度顯示器您僅限于PC顯示器的物理像素，因此，在實際設備上，網(wǎng)站看起來可能會更好或更糟。

　　觸摸與具有小顯示屏的觸摸屏設備相比，鼠標或觸控板具有更好的控制?？赡軣o法查看懸停效果。

　　處理速度您的PC可能比移動設備具有更快的網(wǎng)絡和處理速度。

　　移動操作系統(tǒng)模擬器

　　在設備上運行Android或iOS虛擬機可讓您安裝和運行真正的移動瀏覽器并使用其實際渲染引擎。

　　Android模擬器包括：

　　Genymotion：免費和商業(yè)，適用于Windows，macOS和Linux的所有Android版本

　　Android Studio：免費，Windows，macOS和Linux

　　Visual Studio Xamarin：商業(yè)，Windows和macOS

　　Bliss OS：免費，適用于Windows，Linux和Chrome OS的Android 9

　　Phoenix OS：免費，適用于Windows和macOS的Android 7.1或5.1

　　Android-x86：適用于任何虛擬機平臺的免費Android ISO。

　　Chrome是Android上明顯的瀏覽器選擇，但您也可以安裝Opera Mini，這在低功率功能手機上很顯眼。

　　iOS的選項更為有限：

　　Apple Xcode：商業(yè)，macOS

　　Electric Mobile Studio：商業(yè)，Windows

　　iPadian模擬器：商業(yè)，Windows

　　這些仿真器仍有缺點：

　　該軟件需要一定的技術知識，并占用大量系統(tǒng)資源。

　　許多iOS選項都是模擬器。它們會改用其他渲染引擎，并且不一定總是準確的。

　　在線測試服務

　　幾種在線服務使您可以通過Web在移動瀏覽器上測試響應頁面。本質(zhì)上，您在真實設備上租用時間，并且可以在瀏覽器中查看其屏幕。沒有要設置或維護的軟件。

　　除實時測試外，某些服務還包括自動測試API，使您可以運行腳本并檢查樣式回歸或損壞的用戶界面。

　　LambdaTest提供了2,000多種設備，操作系統(tǒng)和瀏覽器的組合。功能包括：

　　測試localhost開發(fā)PC上運行的頁面

　　使用集成的開發(fā)人員工具進行調(diào)試

　　來自不同位置的地理位置測試

　　在多個設備上自動生成的全屏屏幕截圖

　　內(nèi)置的問題跟蹤器

　　LT瀏覽器軟件(Windows，macOS，Linux)通過自動重新加載和滾動同步來測試和比較設備

　　基于硒的自動化測試API

　　24/7支持

　　真實設備測試

　　最后，沒有替代品可以在真實設備上進行測試。這是評估實際處理速度，觸摸控制和網(wǎng)站的自適應網(wǎng)頁設計的最佳方法。

　　理想情況下，您應該測試盡可能多的設備，但是您自己的最新智能手機可能并不代表平均硬件水平。嘗試獲得一兩年之久的中檔設備，例如二手Moto G7或iPhone 8。

　　在同一網(wǎng)絡上的設備可以通過在瀏覽器中輸入PC的IP地址來訪問PC的服務器。這可以ifconfig在macOS和Linux或ipconfigWindows上獲得。

　　您也可以使用USB電纜將智能手機連接到PC。這使您可以遠程控制設備并輕松訪問其開發(fā)人員工具面板以進行調(diào)試。該技術因平臺而異，但是要在桌面版瀏覽器上調(diào)試Android Chrome，請執(zhí)行以下操作：

　　在Android設備上，從設置中選擇開發(fā)者選項，然后啟用USB調(diào)試。

　　使用適當?shù)腢SB電纜將設備連接到計算機。首次嘗試執(zhí)行此操作時，系統(tǒng)可能會提示您確認一個或兩個設備上的操作。

　　在您的PC上啟動Chrome并打開 在新標簽頁中。確保啟用“發(fā)現(xiàn)USB設備”。

　　(可選)設置端口轉(zhuǎn)發(fā)-例如，8888可以將遠程設備上的端口轉(zhuǎn)發(fā)到localhost:8888。

　　您的設備應出現(xiàn)在列表中?，F(xiàn)在，您可以檢查新的或現(xiàn)有的標簽，該標簽會打開設備的開發(fā)人員工具。

　　要調(diào)試iPhone的Safari，請執(zhí)行以下操作：

　　將手機連接到Apple計算機。

　　在您的iPhone的Safari中打開要調(diào)試的網(wǎng)頁。

　　在計算機上啟動Safari。

　　在計算機上的Safari中，轉(zhuǎn)到開發(fā)> [您的iPhone] > [要檢查的網(wǎng)站]。這將在您的計算機上打開Safari的開發(fā)人員工具，使您可以在iPhone上調(diào)試網(wǎng)站。

　　一個站點，多個視圖

　　響應式網(wǎng)頁設計技術使您可以創(chuàng)建一個網(wǎng)站，無論技術限制和邊界如何，任何人都可以在任何設備上查看該網(wǎng)站。使其具有出色的用戶體驗是另一回事，但是測試工具的范圍和功能仍在不斷提高。