帝国cms教程栏目,提供精品建站,仿站,二次开发,安装,标签使用等图文教程,帮助建设和管理好你的帝国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如何做移动端适配
本文永久链接地址:https://www.moyouyouw.cn/code/185.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
上一篇
下一篇
售价: 399 146 ℃ 0 评论
售价: 399 126 ℃ 0 评论
售价: 399 93 ℃ 0 评论
已有 位小伙伴发表了看法
欢迎 你 发表评论