靜態頁是和圖片類似的靜態資源，訪問靜態資源不會經過程序處理，不會根據瀏覽器返回不同頁面。要同時支持PC端和手機端瀏覽器，且要生成靜態頁時，最好使用bootstrap之類的技術，實現自適應頁面設計。

如果PC端和手機端使用了不同模板，且還需生成靜態頁面，需要解決兩個問題。

第一，PC端和手機端生成的靜態頁面必須保存在不同的目錄，否則PC端的靜態頁會覆蓋手機端的靜態頁。比如PC端和手機端的首頁都是/index.html，最終必然只會保存一個文件。必須是PC端的首頁為/index.html，手機端的首頁為/m/index.html。其它的頁面也類似，如PC端的新聞欄目頁為/news/index.html，手機端的則為/m/news/index.html。

這就需要另外創建一個手機端的HTML發布點，保存路徑為/m，顯示路徑也為/m。

然后在站點管理里設置手機端HTML發布點為之前新建的HTML手機發布點。

第二，由于PC端的頁面和手機端的頁面地址不同，用戶訪問的時候默認是訪問PC端的頁面。由于訪問的是靜態頁，不經過服務器的程序處理，無法在服務器端判斷是什么瀏覽器訪問。此時需要在PC端的頁面里面加上js代碼，判斷是否為手機端瀏覽器訪問，如果是，則使用js跳轉到手機端的靜態頁。

以下代碼放到PC端模板首頁里，如果手機瀏覽器訪問了PC端首頁，會自動跳轉到手機端的頁面地址。

[#if site.url != site.urlMobile]

//生成靜態HTML時，需要使用js判斷是否為手機端訪問，并跳轉到手機端地址

var ua = navigator.userAgent;var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),isAndroid = ua.match(/(Android)\s+([\d.]+)/),isMobile = isIphone || isAndroid;

if(isMobile) location.href = "${site.urlMobile}";

[/#if]

總結

以上是生活随笔為你收集整理的html手机pc不同页面,PC端和手机端如何同时生成静态页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。