版权声明：本文为博主原创文章，遵循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. Ajax操作的四个步骤

    Ajax操作的四个步骤: 创建Ajax对象 连接服务器 发送请求 接收返回信息 <!DOCTYPE html> <html> <head lang="en&qu ...

  2. vue中refs的使用

    最近在看其他项目的过程中,发现在dom节点上使用了ref="xxx"的使用,以前一直不知道该属性起着什么作用,因为一直忙着写项目. 这两天项目不忙了,有闲心来看别人做的项目了,就看 ...

  3. umask的一般用法

    常常会遇到我的Linux系统默认的八进制的umask值是0022,而我创建的文件的八进制权限却是644,这个是怎么一回事? umask值只是一个掩码,它会屏蔽掉掉不想授予该安全级别的权限. 用法是要把 ...

  4. DNS_主从搭建

    一.DNS简介 1.DNS DNS是域名系统(Domain Name System)的简称,它是一个将域名和IP相互映射的分布式数据库.有了DNS服务器,我们只需要记录一个网站的域名即可访问,而再也不 ...

  5. Caused by: com.rabbitmq.client.AuthenticationFailureException: ACCESS_REFUSED - Login was refused using authentication mechanism PLAIN. For details see the broker logfile.的几种原因

    环境:centos 7+ 1.查看用户是否存在 进入安装目录使用./sbin/rabbitmqctl list_users查看是否存在用户 比如:./usr/local/rabbitmq/rabbit ...

  6. 使用choco 在windows 环境安装kubectl 并配置

    首先安装choco #以管理员身份运行cmd命令 @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -N ...

  7. nginx - 反向代理 - 配置文件模板 - nginx 代理tcp的服务 - 部署示意图

    danjan01deiMac:~ danjan01$ cat /usr/local/etc/nginx/nginx.conf|grep -v '^$' worker_processes 1; even ...

  8. Push failed: Failed with error: Could not read from remote repository. IDEA 解决方法

  9. python 爬虫 urllib模块 目录

    python 爬虫 urllib模块介绍 python 爬虫 urllib模块 url编码处理 python 爬虫 urllib模块 反爬虫机制UA python 爬虫 urllib模块 发起post ...

  10. Spring（十一）-- Spring代理生成器

    Spring代理生成器 1.创建需要的dao接口 2.创建需要的daoImpl实现类 3.创建前置增强类 4.创建spring.xml文件 <!-- 这个案例 需要解决的问题: 一个代理工厂 配 ...