自適應(yīng)網(wǎng)頁的特點

時間：2023-08-28 16:12:02 | 來源：網(wǎng)站運營

時間：2023-08-28 16:12:02 來源：網(wǎng)站運營

自適應(yīng)網(wǎng)頁的特點： 隨著無線網(wǎng)絡(luò)的普及，越來越多的人使用手機上網(wǎng)。移動設(shè)備正在取代桌面設(shè)備成為最常見的互聯(lián)網(wǎng)接入終端。因此，網(wǎng)頁設(shè)計者不得不面對一個難題:他們?nèi)绾卧诓煌叽绲脑O(shè)備上呈現(xiàn)相同的網(wǎng)頁？

視口元標記可以指示瀏覽器如何根據(jù)設(shè)備的寬度調(diào)整網(wǎng)頁的大小和比例。如果沒有視口元標記元素，默認情況下，移動設(shè)備瀏覽器會根據(jù)桌面設(shè)備屏幕的寬度(通常約為980像素，但因設(shè)備而異)來呈現(xiàn)網(wǎng)頁。此外，為了盡可能使內(nèi)容看起來更加美觀，移動設(shè)備瀏覽器還將放大字體并縮放內(nèi)容以適應(yīng)相應(yīng)屏幕的大小，或者僅顯示可在相應(yīng)屏幕中顯示的部分內(nèi)容。

對于用戶來說，這意味著屏幕中顯示的字體大小可能并不一致，并且用戶可能需要點按兩次或通過張合手指進行縮放才能夠看到內(nèi)容以及與內(nèi)容互動。對于 Google 來說，我們不會將這類網(wǎng)頁視為適合在移動設(shè)備上瀏覽的網(wǎng)頁，因為它需要用戶在移動設(shè)備上進行這種（或這類）互動。

一、"自適應(yīng)網(wǎng)頁設(shè)計"的概念

2010年，伊森·馬科特(Ethan Marcotte)提出了術(shù)語“自適應(yīng)網(wǎng)頁設(shè)計”(響應(yīng)性網(wǎng)頁設(shè)計)，指能夠自動識別屏幕寬度并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計。他制作了一個范例，展示了《福爾摩斯探案》中六個主角的頭像。如果屏幕寬度大于1300像素，則6幅圖片并排排列在一行中。如果屏幕寬度在600像素和1300像素之間，則6幅圖片被分成兩行。如果屏幕寬度小于400像素，則六幅圖片被分成三行。上面有更多的例子。還有一個測試小工具，可以在網(wǎng)頁上同時顯示不同分辨率屏幕的測試結(jié)果。我建議安裝。

二、自適應(yīng)網(wǎng)頁設(shè)計的特點

1、允許網(wǎng)頁寬度自動調(diào)整

2、不使用絕對寬度

3、相對大小的字體

4、流動布局(fluid grid)

5、選擇加載CSS

6、CSS的@media規(guī)則


點擊添加圖片描述（最多60個字）

我們推薦使用自適應(yīng)網(wǎng)頁設(shè)計是因為它有許多優(yōu)勢：

使用單一網(wǎng)址，可讓用戶更輕松地分享并鏈接到您的內(nèi)容。

有助于 Google 的算法為網(wǎng)頁準確地分配索引屬性，無需表明存在對應(yīng)的桌面版/移動設(shè)備版網(wǎng)頁。

需要較少的工程人力資源投入即可維護包含相同內(nèi)容的多個網(wǎng)頁。

降低了出現(xiàn)影響移動網(wǎng)站的常見錯誤的可能性。

無需重定向即可使用戶獲得已針對設(shè)備進行優(yōu)化的視圖，從而縮短加載時間。此外，基于用戶代理的重定向不僅容易出錯，而且會使網(wǎng)站的用戶體驗大打折扣(有關(guān)詳情，請參見“檢測用戶代理時的常見問題”部分)。

在 Googlebot 抓取您的網(wǎng)站時可節(jié)省資源。對于采用自適應(yīng)網(wǎng)頁設(shè)計的網(wǎng)頁，一個 Googlebot 用戶代理只需抓取您的網(wǎng)頁一次(而不是像使用不同的 Googlebot 用戶代理時那樣需要抓取多次)，即可檢索到所有的內(nèi)容版本。提高抓取效率可間接協(xié)助 Google 將您網(wǎng)站的更多內(nèi)容編入索引，并確保抓取的內(nèi)容是最新的。

不過，有條件的話，最好根據(jù)不同大小的屏幕加載不同分辨率的圖片。有很多方法可以做到這一條，服務(wù)器端和客戶端都可以實現(xiàn)。