2024-01-17 分類: 網站建設
目前網站要同時兼容pc端和移動端的做法通常有2種:
一、響應式
通過css樣式控制頁面在pc和移動端的縮放來兼容屏幕,目前很多中小企業網站、或界面簡單的網站多采用這種方式。
好處:只需要寫一套模板,維護一個網站,工作量比較小。
弊端:響應式網站要么偏重pc端,要么偏重移動端,很難在兩個端都能獲取到良好的瀏覽體驗。
二、pc、移動兩個網站
一般政府,學校或中大型網站多采用這種方式,一個pc站,一個手機站,分別用不同的域名,或者子目錄形式訪問,不同的訪問端打開不同的站點,頁面地址完全不一樣。
好處:制作兩套模板,兩個端都可以獲取到好的瀏覽體驗,前端制作不用考慮兼容性問題。
弊端:由于網站地址不一樣,需要維護兩個網站,后續工作量大。
既然傳統做法出有弊端,那么就需要解決這個問題。
現在需要改進是的:能否在同一個url地址,然后根據瀏覽設備加載不同的模板呢,pc端瀏覽加載pc的模板,手機端瀏覽加載手機模板?
答案是肯定的,下面教程演示PageAdmin Cms如何實現模板的自動識別并加載。
1、首先在模板目錄下,新建一個名為:首頁的文件夾,文件夾下新建兩個文件,index.cshtml和index.mobile.cshtml,如下圖:
這里有個命名約定規則,手機端命名必須是 *.mobile.cshtml這種形式,兩個文件內容都很簡單,就是一行文字。
index.cshtml文件:
index.mobile.cshtml文件:
2、進入欄目管理選擇模板,如下圖:
注意:這里選擇不帶.mobile.cshtml的模板文件。
現在測試一下效果,先用電腦瀏覽器打開首頁,效果如下:
然后瀏覽器切換到移動端模板,刷新一下頁面,效果如下:
模板會自動根據瀏覽設備來加載不同的模板,不只普通模板頁面支持這種方式,Pageadmin的母板頁模板,局部頁模板都支持這種方式來實現模板的自動識別和加載。
當前標題:網站制作教程:PageAdmincms實現Pc/手機移動端加載不同的模板!
轉載來源:http://m.newbst.com/news29/314079.html
成都網站建設公司_創新互聯,為您提供Google、電子商務、域名注冊、網站維護、動態網站、小程序開發
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯
猜你還喜歡下面的內容