版权声明：本文为博主原创文章，遵循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. php进阶之路 -- 03 命名空间

    php进阶之路 -- 03 命名空间 命名空间概述 定义命名空间 空间成员和子空间 空间成员的访问 空间引入 全局空间 一. 命名空间概述 什么是命名空间?从广义上来说,命名空间是一种封装事物的方法. ...

  2. 【AMAD】tenacity -- Python中一个专门用来retry的库

    动机 简介 用法 基本用法 何时停止 尝试间的等待 何时retry 其它 热度分析 源码分析 个人评分 动机 很多时候,我们都喜欢为代码加入retry功能.比如oauth验证,有时候网络不太灵,我们希 ...

  3. 对scrapy进行单元测试 -- 使用betamax

    使用betamax进行单元测试 爬虫代码 测试代码 对于scrapy的单元测试,官方文档并没有提到,只是说有一个Contract功能.但是相信我,这个东西真的不好用,甚至scrapy的作者在一个iss ...

  4. Xshell的使用以及常用命令

    工具/原料 Xshell 方法/步骤 打开软件,点击新建,在主机哪里写入要访问的ip地址,名称随意 点击文件之后,再点击打开: 就可以看到刚才新建的会话了: 点击连接,就会显示下面的画面,输入用户名, ...

  5. 1.docker 慕课入门

    本文是学习慕课网的实战https://www.imooc.com/learn/824  同时结合菜鸟教程的思想https://www.runoob.com/docker/docker-architec ...

  6. [转帖]看完这篇文章，我奶奶都懂了https的原理

    看完这篇文章,我奶奶都懂了https的原理 http://www.17coding.info/article/22 非对称算法 以及 CA证书 公钥 核心是 大的质数不一分解 还有 就是 椭圆曲线算法 ...

  7. 【转贴】bat脚本基础教程

    bat脚本基础教程 https://www.cnblogs.com/linyfeng/p/8072002.html 自己动手太少了. bat脚本就是DOS批处理脚本,就是将一系列DOS命令按照一定顺序 ...

  8. 【案例分享】在 React 框架中使用 SpreadJS 纯前端表格控件

    [案例分享]在 React 框架中使用 SpreadJS 纯前端表格控件 本期葡萄城公开课,将由国电联合动力技术有限公司,资深前端开发工程师——李林慧女士,与大家在线分享“在 React 框架中使用 ...

  9. httprunner - 源码解析

    这里只是做一个大概的解析,还有很多细节部分没有太过于关注 我们从cli.py开始进行解析 1.argparse.ArgumentParser 接受命令行的各种参数 [ argparse.Argumen ...

  10. SVN随笔记录（一）

    svn是版本控制系统 为何使用svn? ~团队在开发同一个项目时对项目进行模块划分,在第一阶段结束后进行部分整合时,提交至服务器上合并. ~多人对同一版本的同一代码进行修改后,合并时会出现冲突,此是需 ...