不想通过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端网页时跳转到对应的移动端网页的更多相关文章

  1. 移动端访问PC站点时自动跳转至移动站点

    方法一: 百度Site APP的uaredirect.js 实现手机访问,自动跳转 <script src="http://siteapp.baidu.com/static/webap ...

  2. JS判断是wap端访问网站还是PC端访问,然后进行自动跳转的代码

    <script type="text/javascript"> function goPAGE() { if ((navigator.userAgent.match(/ ...

  3. 手机访问pc版网站自动跳转为手机版页面

    1.PC版首页</head>标签前加上以下脚本 <script src="/tools/browser_redirect.ashx"></script ...

  4. 手机访问pc网站,自动跳转到手机网站

    <script type='text/javascript'> var browser = { versions: function () { var u = navigator.user ...

  5. JavaScript判断移动端及pc端访问不同的网站

    JavaScript判断移动端及pc端访问不同的网站 现在很多网站都是分为两个版本,一个pc端的一个移动端的(响应式除外),针对这两个版本,就需要对访问的设备进行判断,如果是pc,就直接访问pc网站, ...

  6. 如何使用Charles让手机访问PC自定义域名?

    需求:移动端访问PC上的自定义域名,如在Nginx上配置的域名 ​ 如vv.zzcloud.com这个域名在pc上是通过host映射的方式访问,现在需要在手机上访问到这个域名. 工具:Charles代 ...

  7. SharePoint 如何使自己的网页自动跳转

    SharePoint 如何使自己的网页自动跳转         SharePoint自动制作自己的网页跳的很easy,只有在页面上要添加一个Web部分--内容编辑器,对应的js代码就可以.       ...

  8. 测试网页时需要添加等待的情形 (Selenium)

    测试网页时需要添加等待的情形: 1. 网页跳转 2. DOM结构发生改变.

  9. js如何判断用户是在pc端和还是移动端访问

    js如何判断用户是在pc端和还是移动端访问 来源:A5技术交流 作者:wofa 时间:2014-04-25收藏本页 最近一直在忙我们团队的项目“咖啡之翼”,在这个项目中,我们为移动平台提供了一个优秀的 ...

随机推荐

  1. Activity按下2次退出和获取当前时间

    先看下onBackPressed和onKeyDown的区别 在Android上有两种方法来获取该按钮的事件 1.直接获取按钮按下事件,此方法兼容Android 1.0到Android 2.1 也是常规 ...

  2. wrong requestcode when using startActivityForResult

    You are calling startActivityForResult() from your Fragment. When you do this, the requestCode is ch ...

  3. pygame for python3.3

    pygame的更新慢的令人发指,我最初使用的python是3.4版本的,无何奈何pygame不支持3.4,甚至官网只有3.2版本的.我于是将各种版本试了一遍,出现各种问题,同时我比较钟爱3.x版本,最 ...

  4. 在Windows下编写并运行第一个ASP.NET 5 Preview Web API程序

    2015年07月21日在微软中国MSDN的官方微博上得知Visual Studio 2015正式版完美发布. 抱着尝鲜的心态下载了Visual Studio社区版本. 在这个首发的版本里面,我们可以看 ...

  5. C#中List<T>对象的深度拷贝问题

    一.List<T>对象中的T是值类型的情况(int 类型等) 对于值类型的List直接用以下方法就可以复制: List<T> oldList = new List<T&g ...

  6. jquery实现页面控件拖动效果js代码

    ;(function($) { var DragPanelId = "divContext"; var _idiffx = 0; var _idiffy = 0; var _Div ...

  7. VS2010运行正常的控制台程序在VS2015中出现乱码的解决方法

    以前在Visual Stuido 2010中运行正常的控制台程序,在Visual Studio 2015中出现乱码,找到<Visual Studio 2015的坑:中文字符串编译后成乱码> ...

  8. Spring(四)Bean注入方试

    一.构造方法注入 定义:通过构造函数来完成依赖关系的设定 优缺点: 在构造对象的同时,完成依赖关系的建立 如果关联的对象很多,那和不得不在构造方法上加入过多的参数 基中有index:如果指定索引从0开 ...

  9. Mac下安装Django

    用到一个Python写的后台服务,需要用到Django,参考Django安装文档,配置过程如下: 1.下载一个用来安装和管理Python包的工具“pip”; 2.下载完成后,运行安装脚本,注意需要管理 ...

  10. Java 实现多线程的三种方式

    import java.util.concurrent.Callable; import java.util.concurrent.FutureTask; public class Main { pu ...