不想通过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. edittext 监听内容变化

    给EditText追加ChangedListener可以监听EditText内容变化的监听 如图是效果图  类似于过滤的一种实现 1  布局也就是一个EditText,当EditText内容发生变化时 ...

  2. 线段树区间求最大值(点更新)---I Hate It

    HDU   1754 Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的 ...

  3. [PHP] url的pathinfo模式加载不同控制器的实现

    使用自动加载和解析url的参数,实现调用到不同的控制器,实现了pathinfo模式和普通的url模式 文件结构: |--Controller |--Index |--Index.php |--Appl ...

  4. js 当前日期及时间

    返回时间格式 : 2016-07-22 10:22:30 function getNowFormatDate() { var date = new Date(); var seperator1 = & ...

  5. php生成静态文件

    1,通用生成方法 //获取文件内容 $content=file_get_contents("http://www.google.com/" ); $id=110; $filenam ...

  6. require

      /* require.js框架 RequireJS 2.1.11 Copyright (c) 2010-2014, The Dojo Foundation All Rights Reserved. ...

  7. 高性能文件缓存key-value存储—Memcached

    1.高性能文件缓存key-value存储—Redis 2.ASP.NET HttpRuntime.Cache缓存类使用总结 备注:三篇博文结合阅读,简单理解并且使用,如果想深入学习,请多参考文章中给出 ...

  8. 屏幕字段结构SCREEN的字段含义

    在SAP屏幕中,一个字段就像.NET中的一个控件,这个字段对应一个SCREEN结构,就像控件的多个属性. SE11可以查看SCREEN结构中的字段,只是没有备注. 名称 长度 说明 NAME 屏幕字段 ...

  9. android studio问题rendering problems no render target selected

    activity_main.xml选择Design显示rendering problems no render target selected 在stackOverflow上找到了答案: You ne ...

  10. [Android]Android Debug key 的制作

    Android Debug key 的制作 背景 在Android App 开发过程中,我们经常会使用一些第三方的服务,但是很多的第三方服务都会要求我们提供包名,签名安装包,这时候,我们在日常调试时, ...