【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端和移动端访问测试页面查看效果。
【Javascript Demo】移动端访问PC端网页时跳转到对应的移动端网页的更多相关文章
- 移动端访问PC站点时自动跳转至移动站点
方法一: 百度Site APP的uaredirect.js 实现手机访问,自动跳转 <script src="http://siteapp.baidu.com/static/webap ...
- JS判断是wap端访问网站还是PC端访问,然后进行自动跳转的代码
<script type="text/javascript"> function goPAGE() { if ((navigator.userAgent.match(/ ...
- 手机访问pc版网站自动跳转为手机版页面
1.PC版首页</head>标签前加上以下脚本 <script src="/tools/browser_redirect.ashx"></script ...
- 手机访问pc网站,自动跳转到手机网站
<script type='text/javascript'> var browser = { versions: function () { var u = navigator.user ...
- JavaScript判断移动端及pc端访问不同的网站
JavaScript判断移动端及pc端访问不同的网站 现在很多网站都是分为两个版本,一个pc端的一个移动端的(响应式除外),针对这两个版本,就需要对访问的设备进行判断,如果是pc,就直接访问pc网站, ...
- 如何使用Charles让手机访问PC自定义域名?
需求:移动端访问PC上的自定义域名,如在Nginx上配置的域名 如vv.zzcloud.com这个域名在pc上是通过host映射的方式访问,现在需要在手机上访问到这个域名. 工具:Charles代 ...
- SharePoint 如何使自己的网页自动跳转
SharePoint 如何使自己的网页自动跳转 SharePoint自动制作自己的网页跳的很easy,只有在页面上要添加一个Web部分--内容编辑器,对应的js代码就可以. ...
- 测试网页时需要添加等待的情形 (Selenium)
测试网页时需要添加等待的情形: 1. 网页跳转 2. DOM结构发生改变.
- js如何判断用户是在pc端和还是移动端访问
js如何判断用户是在pc端和还是移动端访问 来源:A5技术交流 作者:wofa 时间:2014-04-25收藏本页 最近一直在忙我们团队的项目“咖啡之翼”,在这个项目中,我们为移动平台提供了一个优秀的 ...
随机推荐
- 【CODEVS 3287】【NOIP2013】火车运输
http://codevs.cn/problem/3287/ 题目描述 国有 座城市,编号从 到 ,城市之间有 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 辆货车在运输货物, 司机们想 ...
- java判定字符串中仅有数字和- 正则表达式匹配 *** 最爱那水货
1.当有其他字符出现时,返回的数组长度>1 String s = "3---6\\5656"; Pattern pattern = Pattern.compil ...
- 【poj 3167】Cow Patterns(字符串--KMP匹配+数据结构--树状数组)
题意:给2个数字序列 a 和 b ,问按从小到达排序后,a中的哪些子串与b的名次匹配. a 的长度 N≤100,000,b的长度 M≤25,000,数字的大小 K≤25. 解法:[思考]1.X 暴力. ...
- Angular 核心概念2
自定义指令 指令增强了 HTML,提供额外的功能 内置的指令基本上已经可以满足我们的绝大多数需要了 少数情况下我们有一些特殊的需要,可以通过自定义指令的方式实现 普通指令 语法 <div hel ...
- js的基本数据类型有哪些?
js的基本数据类型有哪些? ECMAScript中有5中简单数据类型(也称为基本数据类型): Undefined.Null.Boolean.Number和String.还有1中复杂的数据类型----O ...
- SharePoint 2013 单一页面赋设计权限
本文介绍SharePoint的使用中,断开单一页面权限,给用户编辑权限以及操作中遇到的问题,希望给相关需要的人一个参考. 1.首先进入页面库,找到我们的页面,进入共享,如下图: 2.在弹出的窗口中选择 ...
- 安装和配置tomcat服务器
本文主要介绍一下tomcat服务器的安装和配置 1.获取tomcat tomcat服务器可以到它的官方网站(http://tomcat.apache.org)上下载 2.安装tomcat 具体步骤: ...
- Android Studio集成百度地图SDK
1.建议先阅读百度地图官方的继承指南,针对了Eclipse和Android Studio. 百度官方集成指南 2.下载百度地图SDK Android SDK v4.1.1 下载有两种: 1.一键下载( ...
- Effective Java 23 Don't use raw types in new code
Generic types advantage Parameterized type can provide erroneous check in compile time. // Parameter ...
- Effective Java 46 Prefer for-each loops to traditional for loops
Prior to release 1.5, this was the preferred idiom for iterating over a collection: // No longer the ...