AMP 網頁開發介紹與基本設定

分享:
標籤: AMP

AMP 是 google 提出的行動裝置網頁開發的方法,全名為 Accelerated Mobile Pages,照字面意思可以知道是用來加速行動裝置的網頁開啟速度,由於目前網頁設計越來越複雜,若使用 RWD 的方法製作行動裝置版並無法加速網頁的開發速度,反而大多數狀況是會讓開啟的速度變慢,如果想要讓使用者有更好的體驗,就可以使用 AMP 的方式。

要使用 AMP 的網頁可以參考 google AMP 的文件,如同前面提到 AMP 頁面其實是另外製作一個頁面,所以我們可以先使用 google 的 AMP 樣板來開始製作。



  
    
    
    Hello, AMPs
    
    
    
    
  
  
    

Welcome to the mobile web

 

其中注意 html 的標籤要加上 amp,另外 amp 的 js 可以使用的非常有限,也必須先讀入其設計的 library。

 

 

另外由於內容跟電腦版的分開,必須在 amp 頁面指定相對應頁面的網址。


 

而在電腦版的頁面也需要寫對應的 amp 頁面網址


 

要讀入圖片的話也需要用 amp 的標籤


 

設定樣式: