靜態(tài)頁(yè)是和圖片類似的靜態(tài)資源，訪問(wèn)靜態(tài)資源不會(huì)經(jīng)過(guò)程序處理，不會(huì)根據(jù)瀏覽器返回不同頁(yè)面。要同時(shí)支持PC端和手機(jī)端瀏覽器，且要生成靜態(tài)頁(yè)時(shí)，最好使用bootstrap之類的技術(shù)，實(shí)現(xiàn)自適應(yīng)頁(yè)面設(shè)計(jì)。

如果PC端和手機(jī)端使用了不同模板，且還需生成靜態(tài)頁(yè)面，需要解決兩個(gè)問(wèn)題。

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

這就需要另外創(chuàng)建一個(gè)手機(jī)端的HTML發(fā)布點(diǎn)，保存路徑為/m，顯示路徑也為/m。

然后在站點(diǎn)管理里設(shè)置手機(jī)端HTML發(fā)布點(diǎn)為之前新建的HTML手機(jī)發(fā)布點(diǎn)。

第二，由于PC端的頁(yè)面和手機(jī)端的頁(yè)面地址不同，用戶訪問(wèn)的時(shí)候默認(rèn)是訪問(wèn)PC端的頁(yè)面。由于訪問(wèn)的是靜態(tài)頁(yè)，不經(jīng)過(guò)服務(wù)器的程序處理，無(wú)法在服務(wù)器端判斷是什么瀏覽器訪問(wèn)。此時(shí)需要在PC端的頁(yè)面里面加上js代碼，判斷是否為手機(jī)端瀏覽器訪問(wèn)，如果是，則使用js跳轉(zhuǎn)到手機(jī)端的靜態(tài)頁(yè)。

以下代碼放到PC端模板首頁(yè)里，如果手機(jī)瀏覽器訪問(wèn)了PC端首頁(yè)，會(huì)自動(dòng)跳轉(zhuǎn)到手機(jī)端的頁(yè)面地址。

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

//生成靜態(tài)HTML時(shí)，需要使用js判斷是否為手機(jī)端訪問(wèn)，并跳轉(zhuǎn)到手機(jī)端地址

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]

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。