2019年9月4日 星期三

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 的標籤



設定樣式:



反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...