你和朋友們一起出去，歡笑著，度過了一段美好的時光——當有人問大家一個完全腦筋急轉彎的問題時： “為什麼‘B’電池不存在？”
你被難住了。 你的朋友都被難住了。 你拿出智慧型手機，將問題輸入Google機器。 繁榮：Up 彈出了一家電池公司的部落格文章，介紹了全國統一的電池尺寸規格。 這正是你正在尋找的東西，你這個書呆子。
但事情是這樣的：網站上的內容正在加載，就像您在桌面上查看該網站一樣。 也就是說，字體和圖片都是 真的很小， 您發現必須放大並前後滾動才能閱讀內容並與之互動。 現在 那是 令人煩惱的使用者體驗。
這是視口問題的範例。
什麼是視口？
網站的視窗控制使用者查看網頁的裝置的網頁寬度。
如果您沒有正確配置網站的視口，您的行動訪客將注定要經歷幾分鐘令人沮喪的捏合和縮放操作。 （也就是說，如果他們甚至選擇留在您的網站上。）相信我，這可能是一個 很多 網站訪客的數量，因為行動搜尋查詢已經開始超越桌面搜尋。
如果您的網站建置在 Content Hub 上，則無需擔心配置視窗。 您的網站將自動調整以適應任何裝置的視窗。 但如果不是的話 即使您使用響應式設計， 您需要配置視口，以便為行動訪客提供良好的體驗。
在這篇文章中，我將向您展示如何做到這一點。 但首先，讓我們更了解視口的工作原理及其外觀。
使用視口與不使用視口時您的網站是什麼樣子
當您沒有為行動裝置設定視口時， 這些設備將以典型桌面螢幕的寬度呈現網頁，然後縮放以適合螢幕，以便文字和圖形變得非常小。 這稱為“後備寬度”，範圍為 800-1024 像素。
當你 做 為行動裝置設置視口， 網頁的寬度將根據使用者的行動裝置自動縮放，為他們提供更好的體驗。
那看起來像什麼？ 下面，左側的螢幕沒有配置視口，因此行動瀏覽器採用桌面寬度。 右側的螢幕 做 配置了視口，以便行動瀏覽器知道匹配裝置寬度並縮放頁面，以便內容易於閱讀。
圖片來源：Google 開發者
首先，檢查您是否已配置視口
若要進行檢查，請造訪 Google Mobile Ready Check 網站。 將您的 URL 貼到空白欄位中，然後點擊底部的「提交」。 該工具將透過 Google 的行動裝置友善測試來運行您的網站，如果您的視口未配置，它會告訴您。
如果您的視窗尚未設置，請繼續閱讀。
如何配置網站的視口
要配置移動視口， 您所要做的就是在您希望適合行動裝置的所有網頁上新增元視口標籤。
為此，只需複製下面的 HTML 程式碼片段並將其貼到您網站的標題中即可。
裝置寬度初始規模=1″>
在許多情況下，將此視口標籤放在頭文件中將使視口覆蓋整個網站，使您的整個網站更加適合行動裝置。 但請注意，您可能必須 添加 分別為每個網頁添加視口標籤，特別是如果您使用不同的 軟體 為您的網站 相對 你的登陸頁面。 如果您沒有使用 HubSpot 登陸頁面或內容中心等整合解決方案，則必須手動檢查以確保您的登陸頁面、網站頁面和部落格具有此視窗標籤，以便它們適合行動裝置。
筆記： 新增此標籤 慣於 讓您的網站響應行動裝置—這是一個完全不同的過程， 此處描述— 但它 將要 使行動用戶無需放大和縮小以及來回滾動即可閱讀您網站上的內容並與之互動。
這是怎麼回事 紅色文字？
如果您保留紅色文字（「裝置寬度」）的原樣，這僅表示您不想設定顯示內容的特定寬度 – 並且您的網頁將採用使用者的尺寸自動裝置。 你們中的大多數人都會想要這樣做。
如果你 做 由於某些原因想要為特定裝置顯示特定內容，那麼您需要將紅色文字替換為所需裝置的像素寬度。 透過在標籤內設定寬度（這也不是必需的），任何裝置都將以該特定寬度進行渲染。 （通常不建議這樣做，除非您為特定螢幕尺寸設計了頁面/網站。 另外，您不能設定多個視口標籤—您必須選擇一種設備尺寸並堅持使用。）
但假設您確實想設定特定的寬度。 例如，iPhone 的寬度各不相同，但假設您希望您的網站在使用者橫向握住 iPhone 6 時專門顯示它。 iPhone 6 的橫向寬度為 667 像素，因此您可以將此標籤放在您的網站上：
第667章初始規模=1″>
所有 iPad 的橫向寬度均為 1024 像素，因此您可以將此標籤放在您的網站上：
1024初始規模=1″>
合理？ 以下是視口尺寸的完整列表，供您參考。
請記住，by 聲明佈局的寬度等於裝置寬度，那麼當使用者旋轉行動裝置時就會遇到問題。 為了解決這個問題，你*可以*使用 JavaScript 有條件地選擇要使用的元標記屬性，正如 Ian Yates 在這篇博文中指出的那樣……但最簡單的解決方案似乎是完全忽略寬度並簡單地將其保持在“設備寬度”。
無論如何，HTML 標記的「初始比例」部分都可以保持為 1。 它只是確保當有人打開您的內容時，佈局將以 1:1 的比例正確顯示。 這有助於您的網頁充分利用整個橫向寬度，無論行動裝置的方向為何（縱向與橫向）。
就是這樣！ 有疑問嗎？ 在評論部分詢問他們。
有關如何提高網站效能的更多提示，請查看我們最近改版的 網站評分器。 這個免費的線上工具可根據您網站的效能、行動準備情況、SEO、安全性等產生個人化報告。
