現(xiàn)在很多人是通過智能手機(jī)或平板電腦瀏覽網(wǎng)頁(yè),在網(wǎng)頁(yè)設(shè)計(jì)上就要考量到如何讓不同尺寸屏幕大小也能正常顯示,以往會(huì)制作成電腦版和手機(jī)版兩種格式,后來多半以自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)(Responsive web design)技術(shù)直接在不同尺寸屏幕上顯示最適合的樣式,更重要的是可以節(jié)省維護(hù)的成本和時(shí)間。想測(cè)試自適應(yīng)設(shè)計(jì)在各種設(shè)備顯示情形,除了直接使用手機(jī)瀏覽外,其實(shí)也有不少工具可以輔助。
本文要介紹的「everysize」可以檢查你的自適應(yīng)網(wǎng)頁(yè)在各種尺寸設(shè)備下的顯示效果,操作方式也很簡(jiǎn)單,只要輸入要測(cè)試的網(wǎng)址就能使用,無(wú)需額外下載或安裝軟件,也不需要手動(dòng)調(diào)整瀏覽器視窗大小。
everysize 內(nèi)設(shè)一些常見的手機(jī)、平板電腦顯示器尺寸,例如 iPhone、iPad、Samsung Galaxy、OnePlus、Google Pixel 或是 Bootstrap 各種框架大小,也可以依照需求新增或刪除設(shè)備,將測(cè)試畫面拖拽到適當(dāng)位置。和一些只提供截圖的服務(wù)不同,everysize 是以嵌入(iframe)方式讓網(wǎng)頁(yè)在特定大小范圍呈現(xiàn),兼具可直接操作使用的特性。
everysize
網(wǎng)站鏈接:https://everysize.kibalabs.com/
使用教學(xué)
開啟 everysize 輸入要測(cè)試的網(wǎng)站網(wǎng)址,點(diǎn)選 Go 開始使用。
預(yù)設(shè)情況下 everysize 會(huì)在幾種不同的尺寸顯示網(wǎng)頁(yè),包括大、中、小和一個(gè)最小的尺寸范圍,如果要測(cè)試的頁(yè)面本身已經(jīng)具有自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì),就能在不同的屏幕大小顯示出不同的效果,例如最常見的就是選單縮緊、側(cè)邊欄移動(dòng)到最下方等等。
從每個(gè)預(yù)覽畫面左上角可選擇要帶入的設(shè)備尺寸,像是比較新的 iPhone 11 Pro 或是 iPad Pro 都能夠找到,也有 Samsung Galaxy、One Plus 和 Google Pixel 4 等大小。
如果你想測(cè)試的設(shè)備不在 everysize 列表中,也可以從左上角自定義長(zhǎng)寬尺寸進(jìn)行測(cè)試。
everysize 很方便的是可依照需求將設(shè)備拖拽到適當(dāng)位置,在測(cè)試時(shí)就能即時(shí)看出不同設(shè)備間可能產(chǎn)生的變化。
前面有提到這個(gè)工具不單單只是一個(gè)截圖生成器,而是確實(shí)在特定范圍顯示網(wǎng)頁(yè),因此可以通過鍵盤鼠標(biāo)直接瀏覽頁(yè)面,或是實(shí)際操作看看是不是可能產(chǎn)生問題,左上角有個(gè)選項(xiàng)能調(diào)整縮放比例,如果屏幕較小或是無(wú)法一次塞入這么多設(shè)備也能稍作調(diào)整。
值得一試的三個(gè)理由:
測(cè)試自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)在不同設(shè)備的顯示效果
內(nèi)設(shè)多種常見的設(shè)備類型,亦可依照需求自定義特定尺寸大小
以嵌入方式將網(wǎng)頁(yè)直接帶入特定范圍,可通過鼠標(biāo)實(shí)際操作測(cè)試
全站高品質(zhì)素材免費(fèi)下載!