.jpg)
您想了解如何在不同的瀏覽器中測(cè)試 wordpress 網(wǎng)站嗎？
切換 WordPress 主題或更改設(shè)計(jì)時(shí)，跨瀏覽器測(cè)試至關(guān)重要，因?yàn)樗兄诖_保您的網(wǎng)站在不同瀏覽器、屏幕尺寸、操作系統(tǒng)和移動(dòng)設(shè)備上看起來(lái)不錯(cuò)。
在本文中，我們將向您展示如何在不同的瀏覽器中輕松測(cè)試 WordPress 網(wǎng)站。
什么是跨瀏覽器測(cè)試，為什么需要它？
跨瀏覽器測(cè)試是在不同瀏覽器、屏幕尺寸、操作系統(tǒng)和移動(dòng)設(shè)備上測(cè)試您的網(wǎng)站的過(guò)程，以確保您的網(wǎng)站正常運(yùn)行。
在不同的瀏覽器中測(cè)試WordPress 網(wǎng)站可以讓您了解您的網(wǎng)站對(duì)于所有訪問(wèn)者的外觀。
您可能使用的是 Google chrome 等流行瀏覽器，它在臺(tái)式計(jì)算機(jī)上擁有 69% 的市場(chǎng)份額，在移動(dòng)設(shè)備上擁有 64% 的市場(chǎng)份額。
然而，firefox、microsoft edge、safari 和 Opera 等其他瀏覽器仍然被全球數(shù)億用戶廣泛使用。
雖然所有瀏覽器可能看起來(lái)都很相似，但它們都使用不同的代碼，這意味著它們有時(shí)可能會(huì)以不同的方式處理網(wǎng)站元素。作為網(wǎng)站所有者，這意味著您的網(wǎng)站在不同瀏覽器中看起來(lái)可能會(huì)有所不同。
如果您的WordPress 博客無(wú)法在其中一種瀏覽器上正常運(yùn)行，那么您就會(huì)錯(cuò)過(guò)所有這些訪問(wèn)者和流量。
由于這些不是每個(gè)人都能看到的常見(jiàn) WordPress 錯(cuò)誤，因此您可能會(huì)幾個(gè)月都不知道該問(wèn)題，直到有人報(bào)告為止。
這就是為什么在多個(gè)平臺(tái)和屏幕尺寸的不同瀏覽器上測(cè)試 WordPress 網(wǎng)站被認(rèn)為是最佳實(shí)踐的原因。然后，您可以確保您的網(wǎng)站為所有用戶提供相同的用戶體驗(yàn)。
幸運(yùn)的是，有跨瀏覽器測(cè)試工具只需單擊一下即可幫助自動(dòng)化該過(guò)程。
但在我們分享 WordPress 的最佳跨瀏覽器測(cè)試工具列表之前，了解哪些瀏覽器在您的用戶中受歡迎非常重要，這樣您就知道要測(cè)試哪些瀏覽器。
如何查找您的網(wǎng)站訪問(wèn)者使用哪些瀏覽器和設(shè)備
考慮到可用操作系統(tǒng)、瀏覽器和瀏覽器版本組合的數(shù)量，跨瀏覽器測(cè)試對(duì)于小型企業(yè)主來(lái)說(shuō)可能很乏味。
但是，如果您了解網(wǎng)站訪問(wèn)者使用的流行瀏覽器、操作系統(tǒng)和設(shè)備，這些信息可以使該過(guò)程變得更加容易。根據(jù)您的具體統(tǒng)計(jì)數(shù)據(jù)，您也許可以只測(cè)試一些流行的組合。
了解哪些瀏覽器、操作系統(tǒng)和設(shè)備受用戶歡迎的最簡(jiǎn)單方法是使用 Google Analytics。
然而，以正確的方式設(shè)置 Google Analytics 對(duì)于許多網(wǎng)站所有者來(lái)說(shuō)可能具有挑戰(zhàn)性。
這就是我們建議使用MonsterInsights 的原因。它是WordPress 的最佳分析解決方案，已被超過(guò) 300 萬(wàn)個(gè)網(wǎng)站使用。
有關(guān)更多詳細(xì)信息，請(qǐng)參閱有關(guān)如何在 WordPress 中安裝 Google Analytics 的初學(xué)者指南。
注意：安裝 Google Analytics 后，您需要等待幾周才能收集有關(guān)用戶的相關(guān)數(shù)據(jù)。
之后，您可以轉(zhuǎn)到WordPress 儀表板中的見(jiàn)解 ? 報(bào)告頁(yè)面，查看訪問(wèn)者使用哪些設(shè)備訪問(wèn)您的網(wǎng)站。
當(dāng)您向下滾動(dòng)屏幕時(shí)，您將看到“設(shè)備詳細(xì)信息”部分，其中顯示訪問(wèn)者用于訪問(wèn)您的網(wǎng)站的設(shè)備。
要了解哪些瀏覽器在您的用戶中受歡迎，您需要登錄Google Analytics 帳戶并訪問(wèn)“生成潛在客戶”?“受眾”頁(yè)面。
完成此操作后，單擊“受眾”選項(xiàng)旁邊的“+”按鈕以打開(kāi)提示，然后單擊其中的“平臺(tái)/設(shè)備”選項(xiàng)卡。
從這里，您可以了解網(wǎng)站訪問(wèn)者最常使用哪些網(wǎng)站瀏覽器、操作系統(tǒng)和設(shè)備。
一旦你有了這個(gè)列表，你就可以通過(guò)專(zhuān)注于最重要的組合并避免其余的來(lái)節(jié)省時(shí)間。
WordPress 的最佳跨瀏覽器測(cè)試工具
跨瀏覽器測(cè)試工具使您只需點(diǎn)擊幾下即可輕松跨多個(gè)瀏覽器、操作系統(tǒng)和設(shè)備測(cè)試您的 WordPress 網(wǎng)站。
以下是我們針對(duì) WordPress 網(wǎng)站的頂級(jí)跨瀏覽器測(cè)試工具的列表。
1.比特欄
BitBar是一款易于使用且功能強(qiáng)大的跨瀏覽器測(cè)試工具，具有實(shí)時(shí)測(cè)試和屏幕截圖功能。
我們?cè)贏wesome Motive使用這個(gè)工具來(lái)測(cè)試我們的網(wǎng)站，例如 WPBeginner 和我們的高級(jí) WordPress 插件。
這是一項(xiàng)付費(fèi)服務(wù)??，但他們確實(shí)提供了 100 分鐘的免費(fèi)試用帳戶來(lái)測(cè)試產(chǎn)品。
創(chuàng)建試用帳戶后，單擊儀表板上的“開(kāi)始瀏覽器測(cè)試”按鈕。
這將帶您進(jìn)入一個(gè)新屏幕，您可以在其中選擇操作系統(tǒng)和瀏覽器。
之后，添加您的網(wǎng)站 URL，然后 BitBar 將在新屏幕上向您顯示您選擇的瀏覽器中的外觀。
從這里，您還可以通過(guò)單擊“屏幕截圖”圖標(biāo)并運(yùn)行新的屏幕截圖測(cè)試來(lái)獲取所選設(shè)備的屏幕截圖。
這將允許您在運(yùn)行 Chrome、Firefox、Safari、Microsoft Edge、Internet Explorer 和數(shù)百種其他 Web 瀏覽器的 Mac、windows、android 和 ios 設(shè)備上獲取屏幕截圖。
請(qǐng)記住，免費(fèi)帳戶在可以運(yùn)行的瀏覽器和操作系統(tǒng)組合方面受到限制。然而，它涵蓋了頂級(jí)移動(dòng)和桌面平臺(tái)上最流行的瀏覽器。
定價(jià)：按年計(jì)費(fèi)，每月 39 美元起，并允許無(wú)限制的屏幕截圖、手動(dòng)測(cè)試等。
2.瀏覽器堆棧
BrowserStack是一款針對(duì)移動(dòng)應(yīng)用程序和網(wǎng)站的付費(fèi)跨瀏覽器和跨平臺(tái)測(cè)試工具。
他們還提供有限的免費(fèi)試用帳戶，為您提供 30 分鐘的交互式瀏覽器測(cè)試、100 分鐘的自動(dòng)化測(cè)試和 5000 個(gè)屏幕截圖。
它具有實(shí)時(shí)測(cè)試和屏幕截圖功能。您可以選擇要測(cè)試的平臺(tái)，然后選擇瀏覽器。
BrowserStack 將使用實(shí)際的瀏覽器窗口加載虛擬模擬器。您只需輸入要測(cè)試的 URL 即可開(kāi)始測(cè)試。
結(jié)果相當(dāng)準(zhǔn)確，速度也相當(dāng)令人滿意。但是，您仍然需要通過(guò)打開(kāi)每個(gè)瀏覽器來(lái)手動(dòng)執(zhí)行測(cè)試。
定價(jià)：按年計(jì)費(fèi)，每月 29 美元起，為您提供無(wú)限的測(cè)試時(shí)間以及對(duì) Windows 和 macos 的支持。
3. Lambda測(cè)試
LambdaTest是另一個(gè)高級(jí)跨瀏覽器測(cè)試工具，用于實(shí)時(shí)測(cè)試和屏幕截圖測(cè)試。
它附帶免費(fèi)的終身計(jì)劃，每月為您提供 60 分鐘的瀏覽器測(cè)試、10 次響??應(yīng)式測(cè)試和 10 次響??應(yīng)式屏幕截圖。
創(chuàng)建免費(fèi)帳戶后，您可以選擇是否在不同瀏覽器中運(yùn)行實(shí)時(shí)測(cè)試、響應(yīng)式測(cè)試或屏幕截圖測(cè)試。您可以完全控制要運(yùn)行測(cè)試的設(shè)備和 Web 瀏覽器。
然后，LambdaTest 將根據(jù)您正在運(yùn)行的測(cè)試類(lèi)型自動(dòng)為您提供結(jié)果。
只需單擊屏幕截圖，它將在彈出窗口中打開(kāi)供您檢查。
免費(fèi)帳戶在您可以運(yùn)行的測(cè)試數(shù)量方面受到限制，但結(jié)果非常深入，并且將為您提供大量可操作的信息來(lái)改進(jìn)您的網(wǎng)站。
定價(jià)：按年計(jì)費(fèi)，起價(jià)為每月 15 美元，并提供對(duì)無(wú)限實(shí)時(shí)測(cè)試、屏幕截圖和響應(yīng)式測(cè)試的支持。
如果按年計(jì)費(fèi)進(jìn)行移動(dòng)瀏覽器測(cè)試，您將需要價(jià)格較高的計(jì)劃，每月 99 美元。
4.WordPress主題定制器
測(cè)試網(wǎng)站的另一種方法是使用內(nèi)置的WordPress 主題定制器。該工具是每個(gè) WordPress 安裝的一部分，可讓您完全自定義您的網(wǎng)站。
完成站點(diǎn)自定義后，您可以以不同的屏幕尺寸預(yù)覽更改和實(shí)時(shí)站點(diǎn)。
定制器底部有一個(gè)響應(yīng)式視圖部分，可讓您在桌面、平板電腦和移動(dòng)設(shè)備上查看您的網(wǎng)站。
只需選擇您想要預(yù)覽網(wǎng)站的屏幕尺寸，窗口就會(huì)自動(dòng)調(diào)整。
雖然這不會(huì)讓您自動(dòng)在不同的瀏覽器中預(yù)覽您的網(wǎng)站，但您可以實(shí)時(shí)測(cè)試網(wǎng)站的響應(yīng)能力。
如何分析跨瀏覽器測(cè)試截圖
現(xiàn)在您已經(jīng)了解了在不同瀏覽器中測(cè)試 WordPress 網(wǎng)站的最簡(jiǎn)單方法，下一步是分析結(jié)果以查看是否存在需要修復(fù)的問(wèn)題。
如果您使用的是響應(yīng)式 WordPress 主題，并且背后有高質(zhì)量的代碼，那么您的大多數(shù)屏幕截圖看起來(lái)都幾乎相同。
然而，在某些情況下，網(wǎng)站元素在不同的瀏覽器中看起來(lái)可能略有不同。如果這種差異很小并且不會(huì)影響用戶體驗(yàn)、美觀或功能，那么您可以忽略它。
另一方面，如果差異太明顯，影響用戶體驗(yàn)，看起來(lái)不愉快，或者阻止用戶按預(yù)期使用您的網(wǎng)站，那么就需要引起您的注意。
在大多數(shù)跨瀏覽器測(cè)試中，您會(huì)發(fā)現(xiàn)主題的 css 問(wèn)題。
可以通過(guò)使用檢查元素功能找出需要更新哪些 CSS 規(guī)則來(lái)解決此問(wèn)題。之后，您可以添加自定義 CSS來(lái)解決這些問(wèn)題。
如果您無(wú)法自己解決問(wèn)題，那么您可以隨時(shí)聘請(qǐng) WordPress 開(kāi)發(fā)人員來(lái)幫助您解決問(wèn)題。
我們希望本文能幫助您了解如何在不同的瀏覽器中輕松測(cè)試 WordPress 網(wǎng)站。您可能還想查看我們有關(guān)如何注冊(cè)域名的指南以及我們專(zhuān)家為小型企業(yè)精選的最佳實(shí)時(shí)聊天軟件。
.png)
