html手机pc不同页面,PC端和手机端如何同时生成静态页
靜態頁是和圖片類似的靜態資源,訪問靜態資源不會經過程序處理,不會根據瀏覽器返回不同頁面。要同時支持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端和手机端如何同时生成静态页的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 状态输出导航栏html,Vue实现导航栏
- 下一篇: html批量翻译 github,英文单词