欢迎访问-线上互联网广告代理平台网站-热狗网! 加入收藏 | 设为首页 注册    登录

更具广告影响力欢迎投稿-广告代理平台网站

通知:注册会员发布文稿不带锚文本-免费发!。若带锚文本则收费是:20元/月/ID。

通告:会员发布文稿内容都还在-没丢失。发布之前,请提前创建好自己的flag标签,标签是必选项。根据自己的实际需要创建标签即可。

thymeleaf搭配js实现手机端url自动跳转方法

作者:yrladmin  发布日期:2021-10-08 16:13:53  阅读次数:0

thymeleaf搭配js如何设计手机端url自动跳转方法!近几天站长阿亮在设计手机站的时候,遇到了一些关于pc端页面,自动适应手机端屏幕大小,自动跳转到手机站页面的问题。在网上查了一些客户案例的资料,汇总了如下几个技巧操作步骤。分享给近期有做手机网站的,遇到url设计跳转的困难的朋友们。

第一步:设计好head标签内容。里面会有一段javascript脚本语言,包裹了一个function,该方法会获取手机端的浏览器的user-Agent信息,根据头信息判定是否需要进行重新url定位请求。

具体代码如下所示:

  //手机端跳转到H5页面

  (function () {

  var sUserAgent = navigator.userAgent;

  if (sUserAgent.indexOf('Android') > -1 || sUserAgent.indexOf('iPhone') > -1 || sUserAgent.indexOf('iPad') > -1 || sUserAgent.indexOf('iPod') > -1 || sUserAgent.indexOf('Symbian') > -1) {

  window.location.href = ""+"/jyrwwltg/"+"m_4812.html";

  } else { }

  })();

如图所示:清晰明白。你需要做的是关键是,设计好自己的调转地址格式。重点设计这个地方(window.location.href = ""+"/jyrwwltg/"+"m_4812.html";)

第二步:设计好伪静态的转发forword 我目前使用的框架是thymeleaf搭配了html模板。使用了spring mvc web项目,配合tomcat服务器,做的java版本的网站cms系统。所以我的规则如下:

<!-- mobile新闻列表 入口地址 -->

    <rule>

    <from>^/m/([A-Za-z0-9]+)/$</from>    

    <to type="forward">/news/showNewsListByCatedirm?catedir=$1</to>

    </rule>

技巧:和pc端地址区别在于,我加入了一个(/m),以此来判断是不是手机端地址。方便后端控制器进行处理请求。

声明:后端服务器控制器方法接受到的参数信息,是不带反斜杠的,自己在方法体内部借助参数查询数据库信息的时候,根据实际需求,看看要不自己植入反斜杠。我的数据库内是带反斜杠的了,所以我自己需要植入反斜杠,才能开始正常的信息查询,否则会报错的。

我的数据库内容截图如下:

1633681062.png

数据表新闻分类表url设计展示

第三步:控制器方法,我为了区分,单独设计了一个响应手机端url请求的方法,其实就是把之前pc端的方法复制了一份,稍微 做了一点点改变即可。

1633681194.png

手机端url响应方法设计展示

经过以上三个步骤的设计,您的页面就会实现自动识别手机端屏幕,自动跳转到适合自己的页面了。前提是你的手机端页面模板已经准备完毕了。

我的手机端页面模板是在一个单独的文件夹内存储了。和pc端的模板没有在一起!这样做也是为了便于管理模板。更多关于手机网站建设的技巧内容,可以随时咨询站长阿亮手机:【15736771259】

本文标签:手机站

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;
2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;
3.作者投稿可能会经我们编辑修改或补充。
本网站名:小程序开发公司  网址:www.tianjibk.com

当前页面标题:【thymeleaf搭配js实现手机端url自动跳转方法

随机新闻推荐