如果你是利用內容發佈谷歌網站管理員工具來監控您的網站的健康，你可能已經收到了來自谷歌相當不祥的電子郵件近日宣佈你的網站的移動不友好的性質與側服務了COM荷蘭國際集團損害您的搜索引擎排名結果。對於我們的網站
屏幕截圖：來自Google的不祥電子郵件
事實證明，這些警告電子郵件不僅僅是良性建議; 從2015年4月21日開始，谷歌排名的重大更新顯然會優先考慮移動優化網站的展示位置，而不是谷歌搜索結果中未優化的移動搜索或移動設備搜索。如果您的網站擁有越來越多的移動受衆羣體，那麼您將面臨新Google更新受到重創的前線。對於我們其他人來說，寫作是在牆上。
- 我的網站是否適合移動設備？
Google發佈了移動友好測試工具，可讓您快速確定某個網頁是否通過了移動測試。輸入一個URL以查看某個頁面是否通過了集合，然後對類似頁面進行相同的推斷。
解決Google移動可用性問題的第2步
以下指南的目的是幫助您快速解決這些惱人的移動設備可用性問題谷歌是 plaining大約將從2015年4月21日及以後的搜索引擎排名產生不利影響。這並不意味着作爲一個 prehensive指南，使您的網站移動設備優化。從那裏，您將需要深入研究轉變您的網站的主題，以充分響應和未來證明。
![]()
第1步：將正確的DOCTYPE和視口META TAG添加到頁面頂部
每個移動友好頁面的開頭都是以下內容 - 將HTML5 DOCTYPE添加到頁面的頂部，將視口META標記添加到HEAD部分：
1 2 3 4 五 |
|
這些新增加的是合租的第一件事情谷歌檢查移動可用性 pliance。該
隨着視口元標記的添加，現在沒有回到你的頁面移動友好的旅程，因爲在這裏停止實際上對移動用戶體驗弊大於利 - 沒有自動縮小頁面，一切都在頁面在小屏幕上顯示尺寸。如果沒有網站管理員的進一步優化 - 你會使瀏覽頁面對移動用戶來說更加麻煩，不得不滾動一百萬英里才能到達頁面的各個部分。
讓我們快速進入下一步。
![]()
第2步：使用CSS Media查詢在關鍵移動斷點處優化您的頁面
添加doctype和viewport標記後，Google覈對清單中的下一項是：
頁面佈局是否適應移動設備寬度的寬度，因此用戶無需不斷地水平滾動以完整地查看主要內容。如果您的佈局當前使用固定單位（例如960px）作爲其寬度，則需要將其更改爲流體單位（即：％），至少在移動設置中查看頁面時。
無論字體大小和行間距是否合適，通常在移動設備上，都需要從默認值增加以獲得最佳體驗。
所有這些聽起來可能相當令人生畏，但幸運的是，CSS內部現有的工具可以輕鬆處理這兩個問題，同時如果您願意，可以及時讓妻子和孩子們爲午餐約會驚喜。這種武器是CSS Media查詢，這是 一種普遍支持的CSS功能，其關鍵技巧是能夠根據所需的“媒體”條件觸發，其中包括從移動設備或瀏覽器的尺寸，方向到像素密度的所有內容。屏幕。換句話說，我們需要對當前正在查看頁面的設備做出反應。
採用最簡單/最快的途徑來獲取Google移動友好認證頁面，您要做的是使用CSS媒體查詢有條件地隱藏頁面上的輔助元素，以便主要內容在前面和中間可見，而無需水平滾動屏幕變得足夠小。我們首先做以下事情：
識別頁面上的非主要元素，例如左側欄和大型橫幅廣告，併爲每個容器分配一個唯一的ID屬性，以便稍後在CSS中引用它們。
識別頁面上的主要內容，併爲其容器提供唯一的ID屬性。
所述策略是隱藏非主元素和優化主內容容器，以便後來的是COM ES在寬度流體，它的字體和行間距，當屏幕是增加COM上課足夠小（可檢測使用CSS媒體查詢）。在傳統的兩列TABLE佈局之上構建的兩列頁面上，這是遊戲計劃的圖形化外觀：
爲了交流COM plish上述情況，我們會利用吹捧CSS媒體查詢，加入到我們現有的CSS文件（的CSS）或內聯<style>標籤下面的末尾：
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
語法非常簡單 - 每個媒體查詢條件都包括@media (conditions){...}，其中普通CSS在其括號內添加，僅在滿足指定條件時應用（並在不符合時刪除）。
在上面我定義了兩個CSS媒體查詢，當用戶的瀏覽器/設備寬度分別爲860px或更低，以及600px時匹配。通過定義的斷點調整瀏覽器窗口的大小，以查看頁面的響應方式。與CSS中的所有內容一樣，除了匹配多個條件之外，來自多個媒體查詢的樣式級聯並應用於其中。因此，對於600px及以下的第二媒體查詢，當匹配時，該頁面也接收在800px媒體查詢內定義的樣式。注意我是如何給出某些CSS規則後綴的!important- 只要你注意到儘管匹配條件沒有應用繼續定義的CSS值，但是如果目標元素上已經存在任何具有更高CSS特異性的CSS樣式，則會發生這種情況。 而不是你的手機風格。例如，在元素標籤中直接定義的內聯CSS聲明總是優先於外部CSS文件中定義的內容，或者在HEAD部分中全局定義，這可以使我們精心設計的移動樣式!important不受限制。
- 現在檢查谷歌！
上述兩個步驟足以將大多數桌面時代的頁面轉換爲足夠移動的頁面，以通過谷歌的挑剔眼光。證明是在谷歌移動可用性測試結果中：
因此，我們通過Google移動測試的方法如下：向您的網頁添加有效的doctype和viewport元標記，然後使用CSS媒體查詢隱藏頁面上的輔助元素，同時使主要內容的寬度流暢，以跨越整個視口。隱藏次要元素有助於釋放主要內容的寶貴空間，並防止水平滾動訪問部分內容。最後，當設備屏幕足夠小時，line-height如果需要增加字體大小和間距，以使其在小屏幕上更清晰。
兩個最大寬度的故事 - max-width並且max-device-width
在上面步驟2的CSS媒體查詢中，我們使用關鍵字max-width 專門用於在應用封閉的CSS之前檢測所需閾值之下和之下的瀏覽器窗口的大小。您可以使用另一個關鍵字替代它，就是這樣max-device-width。 max-device-width不匹配的瀏覽器窗口，在桌面的寬度COM帕特可以由用戶來調整，而是在設備的整個屏幕寬度，這不會改變。例如，在屏幕分辨率爲1024x768的桌面上，device-width始終爲1024.在iPhone 6上，該值爲375.替換max-width爲 max-device-width相反，在我們的CSS媒體查詢中，如果您希望僅將移動CSS應用於實際的移動設備，而不是桌面瀏覽器，其瀏覽器寬度足夠小，則非常有用。修改後的CSS媒體查詢：
1 2 3 4 五 6 |
|
將基本上只能在實際的移動設備應用與device-width的600px的或更小，因爲沒有現代桌面融爲一體帕特有600px的分辨率水平，這些天。如果您希望最大化默認非移動佈局的收視率，則可以使用此方法，因爲桌面用戶將始終收到默認的CSS集。
通過調整桌面瀏覽器窗口大小來測試CSS媒體查詢並不總是足以準確地瞭解頁面在移動設備上的外觀。這就是爲什麼在下一頁上，我們將查看兩個非常有用的工具，用於在不同設備中模擬/測試您的頁面。