網(wǎng)站設(shè)計(jì)的最佳屏幕尺寸是多少？

  沒有一個(gè)最佳的屏幕尺寸可以設(shè)計(jì)。網(wǎng)站應(yīng)在不同的瀏覽器和平臺(tái)上以所有屏幕分辨率快速響應(yīng)地進(jìn)行轉(zhuǎn)換。無障礙。移動(dòng)友好。首先為您的訪客設(shè)計(jì)。從360×640到1920×1080的設(shè)計(jì)。
  適用于1024×768至1920×1080的臺(tái)式顯示器的設(shè)計(jì)
  適用于360×640至414×896的移動(dòng)顯示器的設(shè)計(jì)
  適用于601×962至1280×800的平板顯示器的設(shè)計(jì)
  檢查百度統(tǒng)計(jì)并針對目標(biāo)受眾的最常見分辨率大小進(jìn)行優(yōu)化
  不要設(shè)計(jì)一種顯示器尺寸或屏幕分辨率。屏幕大小和瀏覽器窗口狀態(tài)因訪問者而異。
  設(shè)計(jì)應(yīng)該響應(yīng)迅速。使用可轉(zhuǎn)換為當(dāng)前用戶窗口大小的自適應(yīng)或響應(yīng)式布局。
  監(jiān)控百度站長工具的移動(dòng)設(shè)備友好性和可用性警告
  它仍然應(yīng)該看起來不錯(cuò)，并且在所有尺寸下都可以正常工作，現(xiàn)在我們的建議是建設(shè)一個(gè)自適應(yīng)/響應(yīng)式網(wǎng)站。
  針對特定屏幕尺寸優(yōu)化頁面布局的三個(gè)主要標(biāo)準(zhǔn)是：
  網(wǎng)頁的初始可見性：屏幕上方是否可見所有關(guān)鍵信息，以便用戶無需滾動(dòng)即可查看？這是在顯示多少個(gè)項(xiàng)目與每個(gè)項(xiàng)目顯示多少細(xì)節(jié)之間的權(quán)衡。
  網(wǎng)頁可讀性：給定頁面寬度，閱讀各列中的文本是否容易？
  網(wǎng)頁美學(xué)：當(dāng)元素的大小和屏幕大小合適時(shí)，頁面的外觀如何？是否所有元素都正確對齊？標(biāo)題是否緊挨著圖片等？
  可用性準(zhǔn)則還建議您考慮所有大小的所有三個(gè)條件。檢查瀏覽器窗口的屏幕分辨率為360×640到1920×1080。
  在整個(gè)分辨率范圍內(nèi)，您的網(wǎng)頁在所有條件上的得分都應(yīng)該很高。
  您的頁面也應(yīng)該以更大或更小的尺寸工作，盡管這種極端情況不那么重要。
  盡管此類用戶當(dāng)然應(yīng)該能夠訪問您的網(wǎng)站，但為他們提供小于設(shè)計(jì)的外觀有時(shí)是可以接受的折衷方案。
  十大最常見的屏幕分辨率
  2020年的前6個(gè)月中，對451,027個(gè)訪客進(jìn)行了訪客分析：
  屏幕分辨率測試用戶數(shù)11920×108088,378（19.53％）21366×76867,912（15.01％）31440×90043,687（9.65％）41536×86432,872（7.26％）52560×144025,954（5.73％）61680×105020,068（4.43％）71280×72015,138（3.34％）81280×80014,007（3.09％）9360×64011,085（2.45％）101600×90010,193（2.25％）
  響應(yīng)式網(wǎng)站模板是一個(gè)很好的選擇
  響應(yīng)式Web設(shè)計(jì)：在相同的上提供相同的HTML代碼，而不管用戶的設(shè)備（例如，臺(tái)式機(jī)，平板電腦，移動(dòng)設(shè)備，非可視瀏覽器）如何，但是可以根據(jù)屏幕大小來不同地呈現(xiàn)顯示。 百度建議使用響應(yīng)式Web設(shè)計(jì)，因?yàn)樗亲钊菀讓?shí)現(xiàn)和維護(hù)的設(shè)計(jì)模式。
  在當(dāng)今世界，許多人正在使用手持設(shè)備（平板電腦和智能手機(jī)）瀏覽網(wǎng)頁，而響應(yīng)式（RWD）已經(jīng)成為解決屏幕尺寸挑戰(zhàn)的極有可能的解決方案。
  此方法不再使用固定寬度的網(wǎng)站，而是使用CSS樣式表中的“媒體查詢”來創(chuàng)建一個(gè)網(wǎng)站，該網(wǎng)站在大小上響應(yīng)手持設(shè)備的不同視口以及人們使用的較小屏幕。
  因此，無論人們使用什么設(shè)備來查看您的網(wǎng)站，您都可以為他們提供最完整的體驗(yàn)。
  百度首選適合移動(dòng)設(shè)備的網(wǎng)站
  如果您想為高競爭力的關(guān)鍵詞在百度獲得高排名，您就需要一個(gè)適合移動(dòng)設(shè)備的網(wǎng)站。
  網(wǎng)站對移動(dòng)設(shè)備的友好程度如何影響各種設(shè)備對網(wǎng)站的排名效果。如果您為小型企業(yè)創(chuàng)建網(wǎng)站，您會(huì)知道他們想要一個(gè)在百度自然搜索中表現(xiàn)良好的網(wǎng)站。
  目前從本質(zhì)上講，這意味著網(wǎng)站設(shè)計(jì)具有響應(yīng)性并且對移動(dòng)設(shè)備友好，尤其是對于百度而言。
  全球桌面屏幕分辨率統(tǒng)計(jì)，2019年5月– 2020年5月
  作為參考，以下是最近（2020年）記錄的當(dāng)前全球頂級屏幕分辨率的列表：
  1366×768 – 23.49％
  1920×1080 – 19.91％
  1536×864 – 8.65％
  1440×900 – 7.38％
  1280×720 – 4.89％
  1600×900 – 4.01％
  1280×800 – 3.33％
  全球移動(dòng)屏幕分辨率統(tǒng)計(jì)，2019年5月– 2020年5月
  360×640 – 17.91％
  375×667 – 7.61％
  414×896 – 6.52％
  360×780 – 5.56％
  360×760 – 5.06％
  414×736 – 3.74％
  全球平板電腦屏幕分辨率統(tǒng)計(jì)，2019年5月– 2020年5月
  768×1024 – 51.98％
  1280×800 – 7.11％
  800×1280 – 5.34％
  601×962 – 4.47％
  600×1024 – 2.85％
  1024×1366 – 1.96％
  臺(tái)式機(jī)，手機(jī)與平板電腦的全球市場份額2019年5月– 2020年5月
  手機(jī)– 50.48％
  臺(tái)式機(jī)– 46.51％
  平板電腦– 3.0％
  如何設(shè)計(jì)在每個(gè)瀏覽器和分辨率下看起來都相同的網(wǎng)站？
  你不能。不可能將網(wǎng)站設(shè)計(jì)成在每個(gè)瀏覽器，平臺(tái)和屏幕分辨率下看起來都一樣，所以請避免嘗試。
  您可以選擇不帶表格的流暢布局來進(jìn)行設(shè)計(jì)，其寬度百分比可以擴(kuò)展和收縮以適合訪問者瀏覽器的設(shè)置，或者您可以考慮研究能夠?qū)崿F(xiàn)相同效果的響應(yīng)式設(shè)計(jì)解決方案。
  搜索引擎偏愛響應(yīng)式設(shè)計(jì)，這對于采用它的人來說是個(gè)好消息。移動(dòng)技術(shù)正在興起-因此，如果要開發(fā)一個(gè)新網(wǎng)站-您必須從一開始就考慮您的網(wǎng)站對移動(dòng)設(shè)備的友好程度。
  在實(shí)際編寫代碼時(shí)，我們的目標(biāo)是使事情簡單。從經(jīng)驗(yàn)中我們知道的是， 對于您而言，確定您的受眾及其使用的設(shè)備，并從整體上構(gòu)建適合該受眾的網(wǎng)站至關(guān)重要，受眾也包括搜索引擎。
  您的移動(dòng)網(wǎng)站是否重定向到您網(wǎng)站的另一個(gè)URL和版本？
   追溯到今天-一些人使用網(wǎng)站的純文本版本為不支持其網(wǎng)站元素的用戶/瀏覽器生成內(nèi)容-試圖（通常是徒勞的）使他們的內(nèi)容更易于訪問。
  W3C甚至曾經(jīng)推薦它，我們認(rèn)為如果其他所有方法都失敗了：
  為訪問者目的而向訪問者傳遞一個(gè)URL始終是理想的選擇，并且如果您正在考慮創(chuàng)建網(wǎng)站的“移動(dòng)”版本，則在傳遞移動(dòng)或智能手機(jī)內(nèi)容時(shí)沒有任何區(qū)別。
  百度可能會(huì)在不久的將來對您的移動(dòng)體驗(yàn)做出主要評價(jià)-因此，我們所有人都確實(shí)需要意識到我們可能很快會(huì)在百度的SERP中看到巨大的變化。
  當(dāng)百度作為“訪問者”時(shí)，由于搜索引擎的典型URL挑戰(zhàn)，通常只提供一個(gè)URL甚至更為重要-在前一段時(shí)間實(shí)施規(guī)范鏈接元素之前就是這種情況。
  因此，理想的情況是始終提供一個(gè)URL。
  百度在這方面給出了建議：“如果您具有“智能手機(jī)”內(nèi)容（我們將其視為普通的Web內(nèi)容，因?yàn)樗ǔＪ瞧胀ǖ腍TML頁面，只是在布局上進(jìn)行了調(diào)整以顯示較小的內(nèi)容），則可以使用rel = 指向您的桌面版本。這有助于我們專注于網(wǎng)絡(luò)搜索的桌面版本。當(dāng)用戶使用智能手機(jī)訪問該桌面版本時(shí)，您可以將他們重定向到移動(dòng)版本。無論URL結(jié)構(gòu)如何，此方法均有效，因此您無需為智能手機(jī)移動(dòng)網(wǎng)站使用子域/子目錄。 然而，更好的方法是使用相同的URL并顯示內(nèi)容的適當(dāng)版本而無需重定向?！?
  百度還提供了以下提示，以檢查您的網(wǎng)站是否準(zhǔn)備好使用移動(dòng)優(yōu)先索引，但是從本質(zhì)上講，如果您正在為網(wǎng)站使用響應(yīng)式網(wǎng)頁設(shè)計(jì)模板，則此更改的問題應(yīng)該很?。?
  確保網(wǎng)站的移動(dòng)版本還具有重要的高質(zhì)量內(nèi)容。這包括文本，圖像（帶有alt屬性）和視頻-采用通常的可檢索和可索引格式。
  結(jié)構(gòu)化數(shù)據(jù)對于用戶喜歡的索引和搜索功能很重要：它應(yīng)該同時(shí)在網(wǎng)站的移動(dòng)版和臺(tái)式機(jī)上。確保結(jié)構(gòu)化數(shù)據(jù)中的URL已更新為移動(dòng)頁面上的移動(dòng)版本。
  元數(shù)據(jù)應(yīng)同時(shí)存在于網(wǎng)站的兩個(gè)版本中。它提供有關(guān)頁面內(nèi)容的提示，以供索引和投放。例如，確保網(wǎng)站上所有頁面的兩個(gè)版本的標(biāo)題和元描述都相同。
  與單獨(dú)的移動(dòng)網(wǎng)址（單點(diǎn)網(wǎng)站）相互鏈接無需更改。對于使用單獨(dú)移動(dòng)URL的網(wǎng)站，請?jiān)谶@些版本之間保留現(xiàn)有的鏈接rel = canonical和鏈接rel = alternate元素。
  檢查單獨(dú)的移動(dòng)網(wǎng)址上的鏈接。當(dāng)使用link rel = 元素進(jìn)行國際化時(shí)，移動(dòng)URL和桌面URL之間分別進(jìn)行鏈接。您的移動(dòng)URL的hreflang應(yīng)該指向其他移動(dòng)URL上的其他語言/區(qū)域版本，并且類似地使用hreflang鏈接元素將桌面與其他桌面URL鏈接。
  確保承載站點(diǎn)的服務(wù)器有足夠的容量來處理可能增加的爬網(wǎng)速度。這不會(huì)影響使用響應(yīng)式網(wǎng)頁設(shè)計(jì)和動(dòng)態(tài)服務(wù)的網(wǎng)站，只會(huì)影響移動(dòng)版本位于單獨(dú)主機(jī)上的網(wǎng)站，例如m.example.com。
  用戶期望向下滾動(dòng)頁面
  過去的網(wǎng)頁用戶通常不需要滾動(dòng)，但多年來，這種情況已經(jīng)改變。
  因此，在設(shè)計(jì)時(shí)，應(yīng)考慮如果用戶只滾動(dòng)一個(gè)完整屏幕或兩個(gè)屏幕，可以看到多少內(nèi)容。超過五個(gè)屏幕的長度可能表示您頁面上的內(nèi)容過多。當(dāng)然，用戶希望等待更短的時(shí)間來查看更全面的內(nèi)容。
  滾動(dòng)和初始可見性顯然都取決于屏幕尺寸：較大的屏幕在屏幕上方會(huì)顯示更多內(nèi)容，并且需要較少的滾動(dòng)。
  對響應(yīng)式移動(dòng)網(wǎng)站的更改會(huì)導(dǎo)百度帶來更多流量嗎？
  不一定，但是有可能。
  與百度優(yōu)化有關(guān)的許多事情–建立一個(gè)適合移動(dòng)設(shè)備的網(wǎng)站或多或少可以確保您保持已經(jīng)獲得的訪問量，并不一定能為您提供來自百度的更多免費(fèi)訪問量。
  百度及其用戶再次提高了質(zhì)量標(biāo)準(zhǔn)，如果您想在更具競爭力的SERP中競爭，這是小企業(yè)克服困難的又一個(gè)障礙。
  從長遠(yuǎn)來看，這種移動(dòng)轉(zhuǎn)化僅對您的用戶來說是一件好事，但從短期來看，對小型企業(yè)的轉(zhuǎn)化率不會(huì)產(chǎn)生什么影響，因?yàn)橥ㄟ^移動(dòng)設(shè)備獲得的轉(zhuǎn)化率通常低于桌面。
  百度表示，這種適用于移動(dòng)設(shè)備的算法對SERP的影響更大，隨著時(shí)間的流逝，我們將發(fā)現(xiàn)更多信息。