版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。

我们想要的效果是pc文件和mobile文件统一入口，适配不同的设备。
先看看项目的目录：

在index.html里面配置js控制选择那一个文件夹下的文件就可以了。
我们要利用：Navigator 对象，Navigator 对象包含有关浏览器的信息。
index.html很简单，直接上码吧：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />

		<script type="text/javascript">

			function browserRedirect() {

	            var sUserAgent = navigator.userAgent.toLowerCase();

	            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";

	            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 (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {

	                //跳转移动端页面

	                window.location.href="http://f.jcngame.com/fanfan20171208/mobile/index.html";

	            } else {

	                //跳转pc端页面

	                window.location.href="http://f.jcngame.com/fanfan20171208//fanmai/index.html";

	            }

	        }

			browserRedirect();

		</script>

	</head>

	<body>

	</body>

</html>
 

补充，感觉之前代码太冗余了，现在用正则来优化了一下：

<script type="text/javascript">

	function browserRedirect() {

           var sUserAgent = navigator.userAgent.toLowerCase();

           if (/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(sUserAgent)) {

               //跳转移动端页面

               window.location.href="http://f.jcngame.com/fanfan20171208/mobile/index.html";

           } else {

               //跳转pc端页面

               window.location.href="http://f.jcngame.com/fanfan20171208//fanmai/index.html";

           }

       }

	browserRedirect();

</script>
 

仿响应式html:JS来判断页面是在手机端还是在PC端打开的方法的更多相关文章

  1. 简单的利用JS来判断页面是在手机端还是在PC端打开的方法

    在移动设备应用越来越广泛的今天,许多网站都开始做移动端的界面展示,两者屏幕尺寸差异很大,所以展示的内容也有所差别.于是就遇到一个问题,如何判断你的页面是在移动端还是在PC端打开的,很简单的问题,那我们 ...

  2. Notyf - 超级简单、响应式的 JS 通知插件

    通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示      免费下载 ...

  3. java 自适应响应式 网站 源码 SSM 生成 静态化 手机 平板 PC 企业站源码

    前台: 支持四套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问 ...

  4. js判断页面在pc端打开还是移动端打开

    js判断页面在pc端打开还是移动端打开,分别跳转不同的index.html window.addEventListener('load', function() { // true为手机,false为 ...

  5. 转：HTML5页面如何在手机端浏览器调用相机、相册功能

    HTML5页面如何在手机端浏览器调用相机.相册功能 开发微信端浏览器访问的HTML5的页面,页面中有一个<input id="input" type="file&q ...

  6. 判断页面是在pc端打开还是在移动端打开

    在项目开发中会遇到在不同的设备中打开页面是不同的,比如: 我在手机中打开一个网站和pc打开一个网站,页面是不同的 具体实施如下 //判断打开网站的终端 var ua = window.navigato ...

  7. 基于html5和css3响应式全屏滚动页面切换效果

    分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览   源码下载 HTML wrappe ...

  8. js判断当前页面在移动设备还是在PC端中打开

    方法一: var isPC = function () { var userAgentInfo = navigator.userAgent.toLowerCase(); var Agents = ne ...

  9. 响应式字体(js控制)

    window.onload=function(x){if ('addEventListener' in document) {document.addEventListener('DOMContent ...

随机推荐

  1. web容器启动加载WebApplicationContext和初始化DispatcherServlet

    原文地址:http://blog.csdn.net/zghwaicsdn/article/details/51186915 ContextLoaderListener监听器,加载ROOT WebApp ...

  2. dockerfile中配置时区

    https://www.cnblogs.com/kevingrace/p/5570597.html #设置时区RUN /bin/cp /usr/share/zoneinfo/Asia/Shanghai ...

  3. ios8唤不起APP的问题

    https://stackoverflow.com/questions/27526966/ios-8-window-location-href-doesnt-work-with-url-scheme ...

  4. golang 数据类型之间的转换

    一.基本数据类型之间的转换 1.string到int int,err:=strconv.Atoi(string) 2.string到int64 int64, err := strconv.ParseI ...

  5. Spark分区实例（teacher）

    package URL1 import org.apache.spark.Partitioner import scala.collection.mutable class MyPartitioner ...

  6. mybatis-generator自动生成代码时，只生成insert方法

    今天使用mybatis-generator自动生成代码时,发现只能生成insert方法, 以前所有的方法都是可以生成的,查看网上解决办法和检查数据库表结构后, 发现2种可以解决的办法: 1.修改myb ...

  7. Xshell 6 安装注册说明

    1.下载 官方下载到的版本在进行安装的时候,是有序列号输入框的如下图,但是好像我们从那个所谓的官网上下载的却没有,只能下载到一点击注册就跳转到一个网站的那种版本. 像上面这种版本如何下载呢? 我们去官 ...

  8. （转）使用 HTML5 WebSocket 构建实时 Web 应用

    HTML5 WebSocket 简介和实战演练 本文主要介绍了 HTML5 WebSocket 的原理以及它给实时 Web 开发带来的革命性的创新,并通过一个 WebSocket 服务器和客户端的案例 ...

  9. 第六次java实验报告

    Java实验报告 班级 计科二班 学号20188437 姓名 何磊 完成时间 2019/10/17 评分等级 实验四 类的继承 实验目的 理解异常的基本概念: 掌握异常处理方法及熟悉常见异常的捕获方法 ...

  10. [c++] WINAPI

    int WINAPI WINMain 中,WINAPI含义 在windef.h头文件中有如下定义: #define WINAPI __stdcall #define APIENTRY WINAPI 函 ...