不想通过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. java初始化构造函数调用顺序

    类初始化时构造函数调用顺序: (1)初始化对象的存储空间为零或null值:  (2)调用父类构造函数:  (3)按顺序分别调用类成员变量和实例成员变量的初始化表达式:  (4)调用本身构造函数. 例子 ...

  2. 容器--Collection和AbstractCollection

    一.前言 容器是JAVA中比较重要的一块,整个体系设计得非常好,同时对于代码学习来说也是比较好的范例.同时很多面试官也比较喜欢用容器来考察面试者的基础知识,所以掌握好容器还是比较重要的.本文主要总结一 ...

  3. struts2进阶篇(4)

    一.使用ActionContext访问Servlet API strtus2提供了一个ActionContext类,该类别称为Action上下文或者Action环境,Action可以通过该类来访问最常 ...

  4. Sharepoint学习笔记—习题系列--70-573习题解析 -(Q127-Q130)

    Question 127You create a custom list named Products.You need to perform a Representational State Tra ...

  5. 学习Android,最简单的按钮提示文本信息

    最近都在看Android系统架构跟四大组件,刚开始自己看书看网络资料,简直就是一脸懵,今天在这里对初学者,或者自学的同学,可以跟着我来学习,Android 编码一个按钮出发事件的小案例: 当然,在此之 ...

  6. KVC实现原理简介

    KVC,全称:Key-Value-Coding. KVC运用了isa-swizzling技术.isa-swizzling就是类型混合指针机制.KVC主要通过isa-swizzling来实现其内部定位查 ...

  7. Maven学习——安装与修改Maven的本地仓库路径

    一.Maven的下载安装配置 1.1.下载 官网 http://maven.apache.org/download.cgi 1.2.安装配置 apache-maven-3.3.3-bin.zip 解压 ...

  8. 如何改进iOS App的离线使用体验

    App Store中的App分析 App已经与我们形影不离了,不管在地铁上.公交上还是在会场你总能看到很多人拿出来手机,刷一刷微博,看看新闻. 据不完全统计有近一半的用户在非Wifi环境打开App,以 ...

  9. iOS之 PJSIP静态库编译(三)

    dada哪个所有静态库编译完成后还是不能运行那个demo,提示你找不到arm**.a 你lipo后要记得吧合并成.a  名字更改成你最后编译版本生成的.a名字....... 或者吧所有库add到你的工 ...

  10. 小波说雨燕 第三季 构建 swift UI 之 UI组件集-视图集(四)Alert View视图 学习笔记

    当我们的应用电量不足的时候,就需要警告提示,那么我们可以用Alert View视图 实现: