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的母版页模板,局部页模板都支持这种方式来实现模板的自动识别和加载。

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

相关文章
|
2月前
|
Android开发 数据安全/隐私保护 虚拟化
安卓手机远程连接登录Windows服务器教程
安卓手机远程连接登录Windows服务器教程
371 4
|
2月前
|
API
查询城市手机号段免费API接口教程
此API用于查询指定城市的手机号段、服务商、区号、邮编等信息。支持POST或GET请求,需提供用户ID、KEY及城市名称等参数。返回数据包括状态码、信息提示、查询数量、最大页码、当前页码、省份、城市、区号、邮编、区划代码及数据集等。示例中提供的ID和KEY为公共测试用,建议使用个人ID和KEY以获得更高的调用频率。
|
2月前
|
API
手机号段查询城市免费API接口教程
此接口用于根据手机号段查询相关信息,包括城市、运营商、区号等。支持POST和GET请求,需提供用户ID、KEY及手机号段前7位作为参数。返回数据包含状态码、信息提示及详细归属信息。示例请求地址:https://cn.apihz.cn/api/ip/haoduan.php?id=88888888&key=88888888&numbers=1321993。接口免费,建议使用个人ID与KEY以独享调用频次。
|
2月前
|
API
查手机号归属地免费API接口教程
此API用于查询指定手机号码的归属地信息,包括号段、省份、城市、运营商等。支持POST和GET请求方式,需提供用户ID、KEY及手机号作为参数。返回结果包含状态码、信息提示及详细归属地信息。示例请求地址:https://cn.apihz.cn/api/ip/shouji.php?id=88888888&key=88888888&phone=13219931963。
|
3月前
|
存储 Android开发 网络架构
点心云-N1盒子、机顶盒、手机等设备-小白保姆式刷机教程
本文介绍了N1盒子的刷机教程,包括未刷机和已刷其他系统的N1。教程详细列出了所需工具和具体步骤,如下载工具包、制作安装盘、打开ADB模式、降级、刷入新系统等,确保用户能够顺利完成刷机操作。对于已刷第三方系统的N1,还提供了解决USB线不被识别、驱动问题及供电不足等常见问题的方法。
671 1
点心云-N1盒子、机顶盒、手机等设备-小白保姆式刷机教程
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
|
6月前
|
小程序 前端开发
手机租房房源小程序模板源码
手机租房房源小程序模板源码
155 4
|
6月前
|
小程序
手机日记本小程序模板源码
手机日记本小程序模板源码
150 4
|
6月前
|
小程序
仓库租赁小程序手机模板
手机微信在线仓库租赁下单,保险箱仓库管理小程序网页模板。包含:仓库主页、使用方法、我的物品、个人中心、查看详情、修改寄件信息、地址、我的余额、实名认证、意见反馈等等模块页面。
59 0
仓库租赁小程序手机模板
|
6月前
|
Web App开发
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问

热门文章

最新文章