帝国模板之家为广大用户提供专业、一站式建站服务。

帝国cms教程

帝国cms教程栏目,提供精品建站,仿站,二次开发,安装,标签使用等图文教程,帮助建设和管理好你的帝国cms站点。

当前位置:首页 > 教程 > 帝国cms教程 > 正文

帝国cms如何做移动端适配

帝国模板之家 2020-08-04 帝国cms教程 评论

帝国cms如何做移动适配?首先我们要明白移动适配中的几个要点。

1、PC页面和对应的移动页面主体内容必须完全对等

尽量保持原PC页面信息量不变,但为了移动页面美观和访问速度,可以删减不太重要的模块和细分导航,但页面主体内容必须保持不变,比如文章正文或目录页面的链接数和链接指向要完全一致。

2、PC和移动的适配关系必须是一对一,不能多对一

若某些PC页面没有对应的移动页,那这些PC页可以不提交适配关系,但不能将多个PC页面同时指向一个移动页面,比如某文章页面在PC上有分页,到了移动站上分页取消,原PC文章所有分页都指向了同一个移动页面,这也会导致校验识别。PS:允许出现一个PC页面对应两个移动页的情况:一个是给高端机看的,一个是给低端机看的。

综上两点我们使用帝国cms多访问端,可以很好的解决移动端适配问题。帝国cms多访问端可以参考帝国cms手机端pc怎么同步这篇文章。使用帝国多访问端可以实现路径的一一对应。接下来我们来看看适配移动端代码。

如:pc站:www.moyouyouw.cn 手机:m.moyouyouw.cn

js是浏览器跳转,meta是告诉搜索引擎移动页面的地址。

具体规则

PC首页:https://www.moyouyouw.cn

<script type="text/javascript">
try {var urlhash = window.location.hash;if (!urlhash.match("fromapp"))
{if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i)))
{window.location="https://m.moyouyouw.cn/";}}}
catch(err)
{
}</script>
<meta name="mobile-agent" content="format=xhtml;url=https://m.moyouyouw.cn/">  

PC封面:https://news.moyouyouw.cn

<script type="text/javascript">
try {var urlhash = window.location.hash;if (!urlhash.match("fromapp"))
{if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i)))
{window.location="https://m.moyouyouw.cn/listinfo-[!--self.classid--]-0.html";}}}
catch(err)
{
}</script>
<meta name="mobile-agent" content="format=xhtml;url=https://m.moyouyouw.cn/listinfo-[!--self.classid--]-0.html">

PC列表:https://news.moyouyouw.cn/lzwx/

<script type="text/javascript">
try {var urlhash = window.location.hash;if (!urlhash.match("fromapp"))
{if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i)))
{window.location="https://m.moyouyouw.cn/listinfo-[!--self.classid--]-0.html";}}}
catch(err)
{
}</script>
<meta name="mobile-agent" content="format=xhtml;url=https://m.moyouyouw.cn/listinfo-[!--self.classid--]-0.html">

PC内容:https://news.moyouyouw.cn/lzwx/127077.html

<script type="text/javascript">
try {var urlhash = window.location.hash;if (!urlhash.match("fromapp"))
{if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i)))
{window.location="https://m.moyouyouw.cn/showinfo-[!--classid--]-[!--id--]-0.html";}}}
catch(err)
{
}</script>
<meta name="mobile-agent" content="format=xhtml;url=https://m.moyouyouw.cn/showinfo-[!--classid--]-[!--id--]-0.html">

至此,帝国cms如何做移动端适配教程介绍完毕!

美梦,诞生在一瞬间,这短暂的喜悦,也就像泡沫一样,往往

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言