PageAdmin Cms建站系统教程:如何实现Pc/手机移动端加载不同的模板

简介: PageAdmin CMS建站系统模板制作基础教程

目前网站要同时兼容pc端和移动端的做法通常有两种:

**一、响应式
**
通过css样式控制页面在pc和移动端的缩放来兼容屏幕,目前很多中小企业网站、或界面简单的网站多采用这种方式。

好处:只需要写一套模板,维护一个网站,工作量比较小。

弊端:响应式网站要么偏重pc端,要么偏重移动端,很难在两个端都能获取到良好的浏览体验。

二、pc、移动两个网站

一般政府,学校或中大型网站多采用这种方式,一个pc站,一个手机站,分别用不同的域名,或者子目录形式访问,不同的访问端打开不同的站点,页面地址完全不一样。

好处:制作两套模板,两个端都可以获取到好的浏览体验,前端制作不用考虑兼容性问题。

弊端:由于网站地址不一样,需要维护两个网站,后续工作量大。

既然传统做法出有弊端,那么就需要解决这个问题。

现在需要改进是的:能否在同一个url地址,然后根据浏览设备加载不同的模板呢,pc端浏览加载pc的模板,手机端浏览加载手机模板?

答案是肯定的,下面教程演示PageAdmin Cms如何实现模板的自动识别并加载。

1、首先在模板目录下,新建一个名为:首页的文件夹,文件夹下新建两个文件,index.cshtml和index.mobile.cshtml,如下图:
1.png

这里有个命名约定规则,手机端命名必须是 *.mobile.cshtml这种形式,两个文件内容都很简单,就是一行文字。

index.cshtml文件:
2.png

index.mobile.cshtml文件:
3.png

2、进入栏目管理选择模板,如下图。
4.png

注意:这里选择不带.mobile.cshtml的模板文件。

现在测试一下效果,先用电脑浏览器打开首页,效果如下:
5.png

然后浏览器切换到移动端模板,刷新一下页面,效果如下:
6.png

模板会自动根据浏览设备来加载不同的模板,不只普通模板页面支持这种方式,Pageadmin的母版页模板,局部页模板都支持这种方式来实现模板的自动识别和加载。

希望这篇文章可以帮助到大家。

相关文章
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
|
2月前
|
小程序 前端开发
手机租房房源小程序模板源码
手机租房房源小程序模板源码
125 4
|
2月前
|
小程序
手机日记本小程序模板源码
手机日记本小程序模板源码
75 4
|
2月前
|
小程序
仓库租赁小程序手机模板
手机微信在线仓库租赁下单,保险箱仓库管理小程序网页模板。包含:仓库主页、使用方法、我的物品、个人中心、查看详情、修改寄件信息、地址、我的余额、实名认证、意见反馈等等模块页面。
30 0
仓库租赁小程序手机模板
|
2月前
|
JavaScript
vue + element UI【实战】音乐播放器/语音条(内含音频的加载、控制,事件监听,信息获取,手机网页阴影的去除等技巧)
vue + element UI【实战】音乐播放器/语音条(内含音频的加载、控制,事件监听,信息获取,手机网页阴影的去除等技巧)
47 1
|
3月前
易优cms内核简洁文章资讯作文范文网站模板源码(带手机版)
易优cms内核简洁文章资讯作文范文网站模板源码(带手机版)
33 10
|
2月前
|
Web App开发
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
|
2月前
|
Web App开发 编解码
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
|
2月前
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
225 0
|
2月前
|
Linux 网络安全 数据安全/隐私保护
网络安全教程-------渗透工具Kali,官网链接,ARM的介绍,Mobil,华为小米,oppe手机,是无法刷入第三方的操作系统的,E+手机,谷歌的picksoul,或者三星手机,系统盘是WSL的
网络安全教程-------渗透工具Kali,官网链接,ARM的介绍,Mobil,华为小米,oppe手机,是无法刷入第三方的操作系统的,E+手机,谷歌的picksoul,或者三星手机,系统盘是WSL的

热门文章

最新文章