【Javascript Demo】移动端访问PC端网页时跳转到对应的移动端网页

简介:

不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,下面是本人测试有效的方式。

1.效果图

PC端访问显示:

移动端访问显示:

 

2.实现:

不考虑移动端搜索引擎优化的话,只需要通过JS判断是否移动端,然后确定是否跳转到指定页面就行了,主要JS如下:

复制代码
//判断是否移动端,如果是则跳转到指定的URL地址
function browserRedirect(url) {
    //只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    if (bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
        window.location.replace(url);
    }
}
复制代码

然后在页面引用JS,调用方法就行了:

    <script src="../js/wap.js"></script>
    <script type="text/javascript">browserRedirect("http://ycdoit.com/test/testmobile.html");</script>

 

PS:大家可以用PC端和移动端访问 测试页面 查看效果。






本文转自叶超Luka博客园博客,原文链接:http://www.cnblogs.com/yc-755909659/p/4556066.html,如需转载请自行联系原作者
目录
相关文章
|
6月前
|
JavaScript 算法 开发者
如何用JS实现在网页上通过鼠标移动批量选择元素的效果?
本文介绍了类似电脑桌面通过鼠标选择多个图标的实现原理。主要通过监听mousedown、mousemove和mouseup事件,动态调整选择框大小并计算与元素的重叠情况。提供了角重叠和相交重叠的检测方法,并附有示例代码和在线演示链接,方便开发者参考与测试。
200 56
|
5月前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
898 58
|
4月前
|
JavaScript API 开发者
在Vue.js中设置方法时访问$vuetify实例的正确姿势。
总之,访问 `$vuetify`实例是一种直观而有效的方法,它使得在Vue组件中处理Vuetify相关的逻辑成为可能。务必留意正确使用 `this`上下文,并确保在执行任何操作之前,Vue组件实例已经正确初始化并且可用。这种方式在组件自身逻辑与Vuetify的界面表现层之间架起了一座桥梁,使得开发者可以通过书写组件代码来控制和优化用户界面。
71 14
|
3月前
|
JavaScript 前端开发 算法
流量分发代码实战|学会用JS控制用户访问路径
流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
94 1
|
2月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
662 0
|
5月前
|
数据采集 Web App开发 JavaScript
Python爬虫如何获取JavaScript动态渲染后的网页内容?
Python爬虫如何获取JavaScript动态渲染后的网页内容?
|
12月前
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
520 1
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
11月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
364 5