屏幕截圖：來自Google的不祥電子郵件

事實(shí)證明，這些警告電子郵件不僅僅是良性建議; 從2015年4月21日開始,，谷歌排名的重大更新顯然會優(yōu)先考慮移動優(yōu)化網(wǎng)站的展示位置,，而不是谷歌搜索結(jié)果中未優(yōu)化的移動搜索或移動設(shè)備搜索。如果您的網(wǎng)站擁有越來越多的移動受眾群體,，那么您將面臨新Google更新受到重創(chuàng)的前線,。對于我們其他人來說，寫作是在墻上,。

- 我的網(wǎng)站是否適合移動設(shè)備？

Google發(fā)布了移動友好測試工具,，可讓您快速確定某個網(wǎng)頁是否通過了移動測試,。輸入一個URL以查看某個頁面是否通過了集合，然后對類似頁面進(jìn)行相同的推斷,。

解決Google移動可用性問題的第2步

以下指南的目的是幫助您快速解決這些惱人的移動設(shè)備可用性問題谷歌是 plaining大約將從2015年4月21日及以后的搜索引擎排名產(chǎn)生不利影響,。這并不意味著作為一個 prehensive指南，使您的網(wǎng)站移動設(shè)備優(yōu)化,。從那里,，您將需要深入研究轉(zhuǎn)變您的網(wǎng)站的主題，以充分響應(yīng)和未來證明,。

 第1步：將正確的DOCTYPE和視口META TAG添加到頁面頂部

每個移動友好頁面的開頭都是以下內(nèi)容 - 將HTML5 DOCTYPE添加到頁面的頂部,，將視口META標(biāo)記添加到HEAD部分：

這些新增加的是合租的第一件事情谷歌檢查移動可用性 pliance。該

隨著視口元標(biāo)記的添加,，現(xiàn)在沒有回到你的頁面移動友好的旅程,，因為在這里停止實(shí)際上對移動用戶體驗弊大于利 - 沒有自動縮小頁面，一切都在頁面在小屏幕上顯示尺寸,。如果沒有網(wǎng)站管理員的進(jìn)一步優(yōu)化 - 你會使瀏覽頁面對移動用戶來說更加麻煩,，不得不滾動一百萬英里才能到達(dá)頁面的各個部分。

讓我們快速進(jìn)入下一步,。

 第2步：使用CSS Media查詢在關(guān)鍵移動斷點(diǎn)處優(yōu)化您的頁面

添加doctype和viewport標(biāo)記后,，Google核對清單中的下一項是：

• 頁面布局是否適應(yīng)移動設(shè)備寬度的寬度,，因此用戶無需不斷地水平滾動以完整地查看主要內(nèi)容。如果您的布局當(dāng)前使用固定單位（例如960px）作為其寬度,，則需要將其更改為流體單位（即：％）,，至少在移動設(shè)置中查看頁面時。

• 無論字體大小和行間距是否合適,，通常在移動設(shè)備上,，都需要從默認(rèn)值增加以獲得最佳體驗。

所有這些聽起來可能相當(dāng)令人生畏,，但幸運(yùn)的是,，CSS內(nèi)部現(xiàn)有的工具可以輕松處理這兩個問題，同時如果您愿意,，可以及時讓妻子和孩子們?yōu)槲绮图s會驚喜,。這種武器是CSS Media查詢，這是 一種普遍支持的CSS功能,，其關(guān)鍵技巧是能夠根據(jù)所需的“媒體”條件觸發(fā),，其中包括從移動設(shè)備或瀏覽器的尺寸，方向到像素密度的所有內(nèi)容,。屏幕,。換句話說，我們需要對當(dāng)前正在查看頁面的設(shè)備做出反應(yīng),。

采用最簡單/最快的途徑來獲取Google移動友好認(rèn)證頁面,，您要做的是使用CSS媒體查詢有條件地隱藏頁面上的輔助元素，以便主要內(nèi)容在前面和中間可見,，而無需水平滾動屏幕變得足夠小,。我們首先做以下事情：

1. 識別頁面上的非主要元素，例如左側(cè)欄和大型橫幅廣告,，并為每個容器分配一個唯一的ID屬性,，以便稍后在CSS中引用它們。

2. 識別頁面上的主要內(nèi)容,，并為其容器提供唯一的ID屬性,。

所述策略是隱藏非主元素和優(yōu)化主內(nèi)容容器，以便后來的是COM ES在寬度流體,，它的字體和行間距,，當(dāng)屏幕是增加COM上課足夠小（可檢測使用CSS媒體查詢）,。在傳統(tǒng)的兩列TABLE布局之上構(gòu)建的兩列頁面上,，這是游戲計劃的圖形化外觀：

為了交流COM plish上述情況，我們會利用吹捧CSS媒體查詢,，加入到我們現(xiàn)有的CSS文件（的CSS）或內(nèi)聯(lián)<style>標(biāo)簽下面的末尾：

語法非常簡單 - 每個媒體查詢條件都包括@media (conditions){...},，其中普通CSS在其括號內(nèi)添加,，僅在滿足指定條件時應(yīng)用（并在不符合時刪除）。

在上面我定義了兩個CSS媒體查詢,，當(dāng)用戶的瀏覽器/設(shè)備寬度分別為860px或更低,，以及600px時匹配。通過定義的斷點(diǎn)調(diào)整瀏覽器窗口的大小,，以查看頁面的響應(yīng)方式,。與CSS中的所有內(nèi)容一樣，除了匹配多個條件之外,，來自多個媒體查詢的樣式級聯(lián)并應(yīng)用于其中,。因此，對于600px及以下的第二媒體查詢,，當(dāng)匹配時,，該頁面也接收在800px媒體查詢內(nèi)定義的樣式。注意我是如何給出某些CSS規(guī)則后綴的!important- 只要你注意到盡管匹配條件沒有應(yīng)用繼續(xù)定義的CSS值,，但是如果目標(biāo)元素上已經(jīng)存在任何具有更高CSS特異性的CSS樣式,，則會發(fā)生這種情況。 而不是你的手機(jī)風(fēng)格,。例如,，在元素標(biāo)簽中直接定義的內(nèi)聯(lián)CSS聲明總是優(yōu)先于外部CSS文件中定義的內(nèi)容，或者在HEAD部分中全局定義,，這可以使我們精心設(shè)計的移動樣式!important不受限制,。

- 現(xiàn)在檢查谷歌！

上述兩個步驟足以將大多數(shù)桌面時代的頁面轉(zhuǎn)換為足夠移動的頁面,，以通過谷歌的挑剔眼光。證明是在谷歌移動可用性測試結(jié)果中：

因此,，我們通過Google移動測試的方法如下：向您的網(wǎng)頁添加有效的doctype和viewport元標(biāo)記,，然后使用CSS媒體查詢隱藏頁面上的輔助元素，同時使主要內(nèi)容的寬度流暢,，以跨越整個視口,。隱藏次要元素有助于釋放主要內(nèi)容的寶貴空間，并防止水平滾動訪問部分內(nèi)容,。最后,，當(dāng)設(shè)備屏幕足夠小時，line-height如果需要增加字體大小和間距,，以使其在小屏幕上更清晰,。

兩個最大寬度的故事 - max-width并且max-device-width
在上面步驟2的CSS媒體查詢中，我們使用關(guān)鍵字max-width 專門用于在應(yīng)用封閉的CSS之前檢測所需閾值之下和之下的瀏覽器窗口的大小,。您可以使用另一個關(guān)鍵字替代它,，就是這樣max-device-width,。 max-device-width不匹配的瀏覽器窗口，在桌面的寬度COM帕特可以由用戶來調(diào)整,，而是在設(shè)備的整個屏幕寬度,，這不會改變。例如,，在屏幕分辨率為1024x768的桌面上,，device-width始終為1024.在iPhone 6上，該值為375.替換max-width為 max-device-width相反,，在我們的CSS媒體查詢中,，如果您希望僅將移動CSS應(yīng)用于實(shí)際的移動設(shè)備，而不是桌面瀏覽器,，其瀏覽器寬度足夠小,，則非常有用。修改后的CSS媒體查詢：

將基本上只能在實(shí)際的移動設(shè)備應(yīng)用與device-width的600px的或更小,，因為沒有現(xiàn)代桌面融為一體帕特有600px的分辨率水平,，這些天。如果您希望最大化默認(rèn)非移動布局的收視率,，則可以使用此方法,，因為桌面用戶將始終收到默認(rèn)的CSS集。

通過調(diào)整桌面瀏覽器窗口大小來測試CSS媒體查詢并不總是足以準(zhǔn)確地了解頁面在移動設(shè)備上的外觀,。這就是為什么在下一頁上,，我們將查看兩個非常有用的工具，用于在不同設(shè)備中模擬/測試您的頁面,。