圖片來源：Pixabay
RWD語法怎麼設定？如何測試手機網頁是否有誤？
看過上篇行動版網站的三種配置方式-RWD、動態服務、獨立網址後，接著我們要來談如何設定這三種行動網站配置的宣告語法。
為了協助搜尋引擎瞭解你對行動網站的設定，我們需要使用宣告語法，讓伺服器判斷訪客裝置後，能正確呈現對應的版本網頁。
RWD響應式網頁設計：
能為所有裝置提供相同的程式碼，可根據螢幕尺寸調整呈現方式。
使用中繼檢視點 meta name=”viewport” 標記，指示瀏覽器該配合訪客裝置適時調整內容。
在文件的標題加入中繼標記：
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
中繼檢視區標記可指示瀏覽器如何控制網頁的大小和縮放。
使用中繼檢視區值 width=device-width，可讓裝置像素配合螢幕寬度，靈活編排內容。
將 initial-scale 屬性設定為 1.0，可在CSS像素和裝置像素之間建立1:1的關係(無論裝置方向為何)。
檢視區可設定以下屬性：
- initial-scale 初始載入畫面時所顯示的倍率
- minimum-scale 最小可縮放到多少倍率
- maximum-scale 最大可縮放到多少倍率
- user-scalable 是否允許訪客利用兩指撥動或雙擊縮放內容 (no不允許；yes允許)
動態服務：
透過同一網址，為每台裝置提供不同的程式碼，根據不同的User-agent提供不同的html內容。
當你的網頁伺服器向行動用戶提供的內容不同於桌機用戶時，建議你使用Vary：User-Agent HTTP標頭。
由於行動版和桌機版用戶端在請求標頭中的User-Agent不同， 緩存服務器就能避免錯誤地把桌機版的內容輸出給行動版用戶。
為什麼要使用Vary User-Agent標頭呢？
使用Vary HTTP標頭，能告訴伺服器，在遇到相同網址對應著不同版本文檔時，如何緩存和篩選合適的版本，以呈現與訪客裝置最適合的網頁內容；以及協助Googlebot更快找到你針對行動裝置調整的內容。
使用Vary HTTP標頭(伺服器回應請求的部分內容)，依據用戶代理程式指名變更：
GET /page-1 HTTP/1.1
Host: www.example.com
(…其餘的HTTP請求標頭…)
HTTP/1.1 200 OK
Content–Type: text/html
Vary: User-Agent
Content–Length: 5710
(… 其餘的HTTP回應標頭…)
獨立網址(大小網)：
針對桌機和行動裝置在不同的網址上提供不同的程式碼，根據訪客的裝置設備，提供對應的網址及頁面。
使用rel=”canonical”和rel=”alternate”標記說明兩個網址間的關係
在電腦版網頁(http://example.com/page-1)上，加入”alternate”替代標記：
<link rel=“alternate” media=“only screen and (max-width: 640px)”
href=“http://m.example.com/page-1“>
在行動版網頁(http://m.example.com/page-1)上，加入”canonical”指向標記
<link rel=“canonical” href=“http://www.example.com/page-1“>
media屬性能幫助搜尋引擎瞭解頁面是特定於小螢幕的
檢測工具：
測試網頁的行動裝置相容性：行動裝置相容性測試
測試網頁的行動裝置可用性：行動裝置可用性-Search Console
可檢測行動裝置設定是否有誤，並根據所顯示的可用性問題一一修正。
評分行動網頁友善度、行動和桌面讀取速度：測試您的行動網站載入速度和效能
STEP.1
STEP.2
STEP.3
