摘要：相比較桌面端，用戶越來越多的從移動(dòng)設(shè)備端訪問網(wǎng)頁(yè)，這已經(jīng)不是什么新鮮事，然而開發(fā)者還需要努力去讓網(wǎng)站更好的適應(yīng)現(xiàn)在的移動(dòng)設(shè)備，本文則介紹了一些PHP類網(wǎng)站的技巧可以幫助你更好的提供良好的移動(dòng)用戶體驗(yàn)。
相比較桌面端，用戶越來越多的從移動(dòng)設(shè)備端訪問網(wǎng)頁(yè)，這已經(jīng)不是什么新鮮事。然而開發(fā)者還是需要努力去讓網(wǎng)站更好的適應(yīng)現(xiàn)在的移動(dòng)設(shè)備，與此同時(shí)，從谷歌近宣布的消息可以看出，它可能會(huì)懲罰那些不能為移動(dòng)設(shè)備用戶提供良好用戶體驗(yàn)的網(wǎng)站，這也迫使開發(fā)者努力做好這方面事宜。本文介紹了一些技巧可以幫助你更好的提供良好的移動(dòng)用戶體驗(yàn)。
以下為譯文：
近，谷歌員工暗示，不能提供友好用戶體驗(yàn)的網(wǎng)站將受到來自通信量的懲罰，谷歌在近幾年已經(jīng)介紹了多個(gè)算法的變化，傷害了許多網(wǎng)站的流量。
不過谷歌的懲罰不應(yīng)該是你努力使網(wǎng)站友好的主要?jiǎng)訖C(jī)，你的主要?jiǎng)訖C(jī)應(yīng)該是為你的用戶提供他們想要的東西，為他們提供好的用戶體驗(yàn)。所以確保你的網(wǎng)站友好的對(duì)象是移動(dòng)用戶，而不是谷歌。
選擇一個(gè)移動(dòng)方案，著眼于更好的滿足網(wǎng)站用戶的需求
這里主要有四個(gè)方法可以為用戶提供更好的移動(dòng)用戶體驗(yàn)：
1. 創(chuàng)建一個(gè)單獨(dú)的手機(jī)網(wǎng)站
如果你想提供一個(gè)不同于桌面網(wǎng)站用戶體驗(yàn)的移動(dòng)用戶體驗(yàn)，創(chuàng)建一個(gè)單獨(dú)的網(wǎng)站，讓移動(dòng)用戶只有一個(gè)選擇。
這個(gè)解決方案可能在某些情況下有意義，但是由于其過程類似于建立一個(gè)全新的網(wǎng)站，因此許多Web開發(fā)者都避免這種方法。
由于谷歌認(rèn)為這樣的移動(dòng)用戶網(wǎng)站是不同于桌面網(wǎng)站的另一個(gè)網(wǎng)站，所以你應(yīng)該在桌面網(wǎng)站設(shè)置一個(gè)rel=alternate鏈接tag，類似于：
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" >
而在移動(dòng)網(wǎng)站頁(yè)面應(yīng)包含rel=canonical鏈接tags，類似于：
<link rel="canonical" href="http://www.example.com/page-1" >
2. 動(dòng)態(tài)服務(wù)
移動(dòng)和桌面網(wǎng)站不同URL的存在可能會(huì)給用戶造成一些混淆。另一方面，僅從屏幕寬度來判斷用戶設(shè)備是否是移動(dòng)設(shè)備并不是一個(gè)可靠的方法。
因此你或許可以考慮動(dòng)態(tài)服務(wù)，它可以用相同的URL服務(wù)于移動(dòng)和桌面網(wǎng)站，只需根據(jù)用戶設(shè)備提供不同的HTML。
這種方法有點(diǎn)復(fù)雜，因?yàn)槟阈枰心芰z測(cè)用戶所使用設(shè)備的類型，如User-Agent（瀏覽器向服務(wù)器發(fā)送的數(shù)據(jù)頭）。你可以在PHP中實(shí)現(xiàn)它（variable $_SERVER['HTTP_USER_AGENT']），然后你需要查詢數(shù)據(jù)庫(kù)來確定設(shè)備尺寸，以此來計(jì)算設(shè)備是否是一個(gè)小屏幕。
當(dāng)你通過相同的URL為不同的設(shè)備提供不同的HTML時(shí)，你還需要發(fā)送HTTP Vary響應(yīng)，讓谷歌機(jī)器人知道你依賴用戶設(shè)備的網(wǎng)站，其工作是不同的，你可以使用下面的方法實(shí)現(xiàn)：
<?php<br> Header('Vary: User-Agent');<br>?>
3. 響應(yīng)Web頁(yè)面
響應(yīng)Web頁(yè)面是指頁(yè)面在Web頁(yè)面尺寸中適應(yīng)性的調(diào)整變化。這意味著，如果Web頁(yè)面改變其尺寸，使用相同HTML代碼的頁(yè)面布局將在某種程度下適應(yīng)本身。
在實(shí)踐中，不僅不同尺寸屏幕上出現(xiàn)的頁(yè)面緯度不同，而且這些頁(yè)面也需要適應(yīng)設(shè)備方向的變化。比如說，當(dāng)用戶旋轉(zhuǎn)設(shè)備的時(shí)候，如果開啟了重力感應(yīng)，其頁(yè)面也會(huì)隨之改變。因?yàn)槠聊坏膶挾群透叨劝l(fā)生了改變。
這種方法被稱為響應(yīng)，因?yàn)樗褂孟嗤腍MTL動(dòng)態(tài)的適應(yīng)屏幕的變化，所以它非常的靈活。這種響應(yīng)通常是使用CSS media查詢來實(shí)現(xiàn)，這里有個(gè)示例：
.c640 {
display: block;
}
@media (max-width: 640px) {
.c640 {
display: none;
}
}
4. 移動(dòng)應(yīng)用
這種方法可以說是一種互補(bǔ)的解決方案，它包含在可以安裝在用戶設(shè)備上的移動(dòng)應(yīng)用中，有利用本地設(shè)備的能力。而且有些原生功能，用戶無(wú)法通過訪問你的網(wǎng)站來獲得，例如向他們的設(shè)備發(fā)送一些推送通知等。
十個(gè)網(wǎng)站響應(yīng)的技巧
1. 從網(wǎng)站訪問次數(shù)多的頁(yè)面開始
如果你使用的是類似Wordpress這樣的常見內(nèi)容管理系統(tǒng)，你的工作將簡(jiǎn)單很多，因?yàn)槟阒恍枰ㄟ^一個(gè)響應(yīng)站點(diǎn)更換主題即可。
如果你有一個(gè)基于定制開發(fā)的網(wǎng)站，比如說是PHP類的情況下，你將需要為適應(yīng)移動(dòng)用戶做一些定制開發(fā)。
如果你有一個(gè)擁有上千頁(yè)面的大網(wǎng)站，還要適應(yīng)PHP類。你的工作將是巨大的，可能需要數(shù)月時(shí)間才能完成。因此你需要為這些影響更多用戶的頁(yè)面制定一個(gè)標(biāo)準(zhǔn)。
在PHP類網(wǎng)站的情況下，很容易確定影響更多用戶的頁(yè)面是發(fā)布于網(wǎng)站上的包，因?yàn)樗鼈儷@得更多的訪問量。除此之外，其他被訪問多的網(wǎng)頁(yè)類型就不是很明確了。
因此你需要考慮站點(diǎn)谷歌分析報(bào)告，如果你擔(dān)心谷歌啟動(dòng)算法更新，處罰非移動(dòng)友好站點(diǎn)，那么好看一下網(wǎng)站管理員工具報(bào)告，特別是Search Queries和Top Pages。
你可以使用PHP網(wǎng)站管理員工具API類來提取你所需要的頁(yè)面報(bào)告。
2. 使用瀏覽器開發(fā)者工具在小屏幕上預(yù)覽你的頁(yè)面
一旦你找到了首要處理的頁(yè)面，你需要掌控目前可能出現(xiàn)的問題，防止它們呈現(xiàn)在移動(dòng)設(shè)備的屏幕上。
現(xiàn)在的瀏覽器（如Chrome）會(huì)提供工具，可以上你在不同的屏幕尺寸上預(yù)覽頁(yè)面。
3. 使視窗適應(yīng)屏幕尺寸
在這一點(diǎn)中，你首先要做的事是定義一個(gè)可以根據(jù)屏幕尺寸調(diào)整的視窗。（視窗是指一個(gè)頁(yè)面的可見部分），如果一個(gè)頁(yè)面太大，不適應(yīng)當(dāng)前的屏幕分辨率，這時(shí)可能需要滾動(dòng)條。
定義視窗可以通過窗口寬度匹配設(shè)備寬度來實(shí)現(xiàn)，可以通過HTML標(biāo)記指定的視窗參數(shù)。下面的這個(gè)例子里，我們定義窗口寬度匹配設(shè)備寬度，初始縮放范圍從1開始。這意味著移動(dòng)瀏覽器將調(diào)整頁(yè)面寬度縮放比例來適應(yīng)設(shè)備寬度。
<meta name="viewport" content="width=device-width, initial-scale=1">
4. 從頁(yè)眉頁(yè)腳開始
當(dāng)你通過窗口寬度匹配設(shè)備寬度定義視窗后，你可能會(huì)注意到針對(duì)桌面的頁(yè)面不適應(yīng)小型移動(dòng)設(shè)備屏幕，會(huì)出現(xiàn)溢出問題。這是你需要構(gòu)建HTML響應(yīng)。通常情況下，所有的網(wǎng)站都有帶有頁(yè)面和頁(yè)腳HTML的頁(yè)面。你可以從這里開始，因?yàn)槟愀淖冞@些頁(yè)面和頁(yè)腳將影響所有的頁(yè)面。
5. 使用菜單按鈕收縮導(dǎo)航欄
PHP類網(wǎng)站下，可以使用兩個(gè)水平菜單：一個(gè)常見的導(dǎo)航，另一個(gè)用于記錄用戶操作。
橫向菜單可以利用可用的水平空間的優(yōu)勢(shì)，所以基本上所有的響應(yīng)頁(yè)面，其導(dǎo)航菜單都會(huì)有兩個(gè)版本：一個(gè)是寬屏幕時(shí)，整個(gè)菜單選項(xiàng)可以水平顯示，另一個(gè)則是菜單搜索按鍵加一個(gè)搜索欄。
網(wǎng)站使用media查詢來顯示單一類型的導(dǎo)航（或另一個(gè)），下面代碼演示的是HTML和CSS實(shí)現(xiàn)該功能的簡(jiǎn)化版本：
<div class="c1025">Desktop menu here</div>
<div class="u1025">Mobile menu here</div>
@media (max-width: 1024px) {
.c1025 {
display: none;
}
}
@media (min-width: 1025px) {
.u1025 {
display: none;
}
}
用PHP類構(gòu)建的菜單按鈕使用了一個(gè)很好的技巧來避免對(duì)JavaScript的需求。它使用一個(gè)隱藏的表單復(fù)選框來控制下拉菜單的可見性。
下面是使用HTML和CSS渲染這類菜單的簡(jiǎn)化版本：
<div id="navigation-menu">
<input type="checkbox" id="navigation-button">
<div class="menu-items">
<div><a href="/browse/"> All class groups </a></div>
<div><a href="/browse/latest/latest.html"> Latest entries </a></div>
<div><a href="/browse/top/top.html"> Top 10 charts </a></div>
<div><a href="/blog/"> Blog </a></div>
<div><a href="/discuss/"> Forums </a></div>
<div><a href="/faq/"> Help FAQ </a></div>
</div>
<label for="navigation-button" id="navigation-label">
<span class="drop-icon">Icon Image here</span>
</label>
</div>
.menu-items {
position: absolute;
z-index: 1001;
background-color: #103754;
border-color: #cccccc;
border-style: solid;
border-width: 1px;
padding: 4px;
top: 32px;
line-height: 36px;
}
.menu-items a {
color: #C3F0FF;
font-weight: bold;
text-decoration: none;
}
#navigation-menu {
display: inline-block;
padding: 6px 10px 0px 10px;
}
#navigation-menu .menu-items {
display: none;
}
#navigation-button:checked + .menu-items {
display: inline-block;
}
#navigation-menu input[type="checkbox"],
#navigation-menu ul span.drop-icon {
display: none;
}
6. 犧牲不重要頁(yè)面元素
完成頁(yè)眉頁(yè)腳，你還要繼續(xù)你的步伐，穿梭于網(wǎng)站每個(gè)類型頁(yè)面中，按照頁(yè)面訪問優(yōu)先級(jí)（參照前文）。
使用瀏覽器開發(fā)工具在小屏幕上預(yù)覽頁(yè)面，減少視窗分離器寬度，直到頁(yè)面元素溢出視窗。
這時(shí)你需要找出哪些不重要的頁(yè)面元素，你可以使用CSS樣式通過media查詢犧牲和隱藏它們。
下面演示的是media查詢定義逐漸減少點(diǎn)，用于隱藏不同頁(yè)面元素：
@media (max-width: 1024px) {
.c1025 {
display: none;
}
@media (min-width: 1025px) {
.u1025 {
display: none;
}
}
@media (max-width: 499px) {
.c499 {
display: none;
}
}
@media (max-width: 799px) {
.c799 {
display: none;
}
}
@media (max-width: 640px) {
.c640 {
display: none;
}
}
@media (max-width: 360px) {
.c360 {
display: none;
}
}
7. 使用Google Page Speed Insights來解決懸而未決的問題
谷歌驗(yàn)證一個(gè)網(wǎng)站是否移動(dòng)友好的標(biāo)準(zhǔn)有什么？在視窗上顯示恰好的可見內(nèi)容只是其中的一個(gè)標(biāo)準(zhǔn)，還有其他一些不太好評(píng)估的，比如接觸點(diǎn)的距離（如鏈接和按鈕）。
幸運(yùn)的是，谷歌提供了一個(gè)工具來幫助我們發(fā)現(xiàn)需要修復(fù)的問題，這只是Google Page Speed Insights工具的一部分。
你只需要輸入一個(gè)你制作的頁(yè)面URL，它會(huì)向你展示一個(gè)等級(jí)（0%-100%），讓你知道你的頁(yè)面在手機(jī)上的可用性等級(jí)，它還會(huì)顯示該頁(yè)面目前所存在的問題。
8. 圖像適應(yīng)頁(yè)面寬度限制
你可能會(huì)遇到這樣一個(gè)問題，需要適應(yīng)小屏幕的頁(yè)面存在很多的圖片元素。這時(shí)你有兩種選擇，一是如前面提到的，犧牲圖片元素；二是自動(dòng)的調(diào)節(jié)圖片的寬度和高度，該方法適用于有可用的空間。
第二種方法可以通過將圖片的寬度設(shè)置為100%（或其他百分比）來實(shí)現(xiàn)，然后將圖片高度設(shè)置為自動(dòng)，以此來保證原始圖片的比例。如下段代碼所示例的那樣：
@media (max-width: 55em) {
.blog-post-body p img {
width: 100%;
height: auto;
}
}
與圖像相關(guān)的另一個(gè)方面是，如果你的菜單和圖標(biāo)使用的是小圖像時(shí)，當(dāng)瀏覽器縮放視窗來匹配設(shè)備寬度，那些小圖片看起來會(huì)很大，如果那些圖片分辨率很低的時(shí)候，更是會(huì)破壞整個(gè)頁(yè)面的質(zhì)量。而解決這種問題的一個(gè)方法是使用高分辨率圖片，設(shè)置較小值的寬度來匹配設(shè)備。
9. 安全“填充”鏈接和按鈕四周
谷歌工具可能會(huì)報(bào)告的另一個(gè)典型問題是，你的鏈接或按鈕太接近對(duì)方了，這很容易導(dǎo)致錯(cuò)誤操作。你可以利用CSS樣式表“填充”這些鏈接和按鈕的空間，下面是一個(gè)簡(jiǎn)單的示例：
.safe-padding {
padding: 2px;
line-height: 200%;
}
10.使用谷歌網(wǎng)站管理員工具：移動(dòng)可用性報(bào)告
谷歌在Google Webmaster Tools網(wǎng)站上為我們提供了另一種工具：Mobile Usability（移動(dòng)可用性）。它可以給你一個(gè)進(jìn)程的概念，以及任何你可能或者你認(rèn)為沒有解決的問題。
這個(gè)工具顯示不同類型的問題：觸摸元素太近、小字體尺寸、寬度固定窗口……。它可以給你提供擁有這些問題的頁(yè)的總數(shù)以及URL。不過工具不會(huì)實(shí)時(shí)報(bào)告這些，實(shí)際報(bào)告大概會(huì)延遲一個(gè)星期，所以它的報(bào)告中或許會(huì)存在你已修復(fù)的問題。盡管如此，它也是很有用處的，任何頁(yè)面的問題都會(huì)有一個(gè)鏈接，你對(duì)此會(huì)一目了然。
總結(jié)
對(duì)Web開發(fā)者來說，調(diào)整網(wǎng)站以適應(yīng)移動(dòng)設(shè)備是乏味和無(wú)聊的任務(wù)，遠(yuǎn)沒有前端工作給人帶來的興奮。然而這是必須的進(jìn)行的一項(xiàng)任務(wù)。
移動(dòng)適應(yīng)工作仍在繼續(xù)，只有部分頁(yè)面適應(yīng)了移動(dòng)設(shè)備，所以在未來我們會(huì)看到更多的變化。
無(wú)論如何，本文是為了分享一些有用的信息給那些正處于網(wǎng)站適應(yīng)移動(dòng)設(shè)備過程的人們。如果您已經(jīng)經(jīng)歷過類似的過程，或者您有其他相比較本文所分享的技巧而言更好的方法。您可以留下您的觀點(diǎn)，分享您的經(jīng)驗(yàn)。
英文鏈接：http://www.phpclasses.org
本站文章版權(quán)歸原作者及原出處所有 。內(nèi)容為作者個(gè)人觀點(diǎn)， 并不代表本站贊同其觀點(diǎn)和對(duì)其真實(shí)性負(fù)責(zé)，本站只提供參考并不構(gòu)成任何投資及應(yīng)用建議。本站是一個(gè)個(gè)人學(xué)習(xí)交流的平臺(tái)，網(wǎng)站上部分文章為轉(zhuǎn)載，并不用于任何商業(yè)目的，我們已經(jīng)盡可能的對(duì)作者和來源進(jìn)行了通告，但是能力有限或疏忽，造成漏登，請(qǐng)及時(shí)聯(lián)系我們，我們將根據(jù)著作權(quán)人的要求，立即更正或者刪除有關(guān)內(nèi)容。本站擁有對(duì)此聲明的最終解釋權(quán)。
