若要檢查佈局,請在瀏覽器中按下鍵盤上的「F12」。您面前將出現一個面板 - 點擊您感興趣的行動裝置(智慧型手機或平板電腦)的圖示。將開啟多個面板,選擇所需的解析度。
有一種更簡單的方法可以檢查。您可以如下檢查自適應網站版面的工作原理:按住「CTRL」鍵,然後按「+」/「-」。根據您的操作,資源頁面也應該發生變化(縮小/增加)。
然而,佈局所指向的元素將根據規 馬來西亞手機號 定的規則「行動」(保持比例或做其他事情)。
裝置響應式
自適應網站佈局_Deviceponsive
一種工具,您可以使用該工具透過 IFrame 載入資源來檢查佈局。您將看到具有您感興趣的分辨率的框架設備。
響應式設計.is
自適應網站佈局_Ami.responsivedesign.is
這項服務可以歸類為娛樂。首先,該網站會載入到 Iframe 視窗中,然後將它們插入到 Apple 裝置中(您可以透過更改裝置的位置來自行選擇裝置)。這對於截圖來說非常方便。
怪異工具
自適應網站佈局_Quirktools
該服務被認為是最好的服務之一,因為它功能最齊全:任何尺寸的安裝、旋轉、禁用滾動的能力等。此外,您還可以在其上測試各種設備,因為可以使用 29 種解析度。我對服務的速度也很滿意。
自適應網站佈局的典型錯誤
容器使用不當
自適應網站佈局行
從理論上來看,水平放置的容器是一個理想的選擇,但實際經驗有時會告訴我們不同的情況:無關緊要的內容被放置在最左邊的列中(例如,太高的側邊欄),這些內容將顯示在行動裝置。
這將導致用戶必須滾動許多頁面才能到達他感興趣的資訊或產品卡。同意,這不是很方便。換句話說,按列排列的區塊並不總是能提高網站的可用性。
有幾種方法可以解決這個問題:
不要在小螢幕上顯示不重要的區塊;
將上面的次要內容放入手風琴(下拉元素)中;
使用彈性佈局,因為這種自適應網站佈局將允許您在智慧型手機和平板電腦的螢幕上建立區塊的順序。
將頁面的各個元素正確組合成行非常重要(您需要非常仔細地考慮它們在行動裝置螢幕上出現的順序和方法)。如果您不這樣做,訪客將不得不不斷滾動,這不太可能讓他們滿意並讓他們想要再次使用該資源。
滾動區塊
帶有滾動的自適應網站佈局塊
為了節省空間,許多網站使用可滾動塊。如果這是 PC 或筆記型電腦螢幕,則可以使用滑鼠完成滾動,即沒有任何問題。但行動裝置的工作原理不同:使用者從上到下滾動頁面(反之亦然),區塊佔據螢幕的整個寬度,一個接一個地排列。
下載這個有用的文件:
清單:如何在與客戶談判中實現您的目標
結果很容易預測:網站區塊向下捲動,直到出現帶有自己的捲軸的區塊;現在訪客必須滾動瀏覽該區塊的所有頁面才能進一步工作。
解決問題並不是那麼困難。如果網站的自適應佈局允許您透過點擊展開區塊,那就更好了,否則它們將以全高顯示。不建議在窄螢幕上滾動。
無法折疊的菜單
自適應網站佈局_固定選單
自適應網站佈局必須解決一個非常重要的問題:功能元素必須變得緊湊,但仍可供訪客存取。在小螢幕上,所有元素都排列在無休止的隊列中(與 PC 顯示器上的位置不同)。因此,菜單值得特別關注。
首先,因為它總是相當麻煩並且覆蓋了整個螢幕,使得無法自由滾動(用戶觸摸螢幕,肯定會單擊其中一個選單按鈕並轉到某個頁面)。
實踐經驗提出了解決這個問題的方法:行動裝置的螢幕上應該會出現一個特殊的圖標,帶有幫助和選單。
當遊標懸停時觸發事件
通常,網站會設定當您將遊標停留時可以觸發的事件(提示、照片、下拉式選單)。但行動裝置的工作方式略有不同:它沒有我們使用 PC 或筆記型電腦時習慣的遊標形式。
觸控螢幕元素會引發相當於滑鼠點擊(按下)的事件。因此,必須在觸摸之後發生的動作造成一定的不便。自適應網站佈局應該提供這種細微差別,並且最好完全擺脫此類事件。