仿响应式html:JS来判断页面是在手机端还是在PC端打开的方法
我们想要的效果是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端打开的方法的更多相关文章
- 简单的利用JS来判断页面是在手机端还是在PC端打开的方法
在移动设备应用越来越广泛的今天,许多网站都开始做移动端的界面展示,两者屏幕尺寸差异很大,所以展示的内容也有所差别.于是就遇到一个问题,如何判断你的页面是在移动端还是在PC端打开的,很简单的问题,那我们 ...
- Notyf - 超级简单、响应式的 JS 通知插件
通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示 免费下载 ...
- java 自适应响应式 网站 源码 SSM 生成 静态化 手机 平板 PC 企业站源码
前台: 支持四套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问 ...
- js判断页面在pc端打开还是移动端打开
js判断页面在pc端打开还是移动端打开,分别跳转不同的index.html window.addEventListener('load', function() { // true为手机,false为 ...
- 转：HTML5页面如何在手机端浏览器调用相机、相册功能
HTML5页面如何在手机端浏览器调用相机.相册功能 开发微信端浏览器访问的HTML5的页面,页面中有一个<input id="input" type="file&q ...
- 判断页面是在pc端打开还是在移动端打开
在项目开发中会遇到在不同的设备中打开页面是不同的,比如: 我在手机中打开一个网站和pc打开一个网站,页面是不同的 具体实施如下 //判断打开网站的终端 var ua = window.navigato ...
- 基于html5和css3响应式全屏滚动页面切换效果
分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览 源码下载 HTML wrappe ...
- js判断当前页面在移动设备还是在PC端中打开
方法一: var isPC = function () { var userAgentInfo = navigator.userAgent.toLowerCase(); var Agents = ne ...
- 响应式字体(js控制)
window.onload=function(x){if ('addEventListener' in document) {document.addEventListener('DOMContent ...
随机推荐
- 什么是maven？maven中的pom文件是做什么的？
Maven 是专门用于构建和管理Java相关项目的管理工具. 1.使用Maven管理的Java 项目都有着相同的项目结构 2.统一维护jar包 POM是项目对象模型(Project Object Mo ...
- 大觅网02Day
docker环境搭建:(注:请先完成上一次的环境搭建) A.部署环境(导入上次系统的时候修改虚拟机的内存) 1.安装系统自带版本Docker:apt-get install docker.io 2.查 ...
- 【AMAD】Stream-Framework -- 让你可以使用Cassandra和Redis构建新闻feed，活动流(activity stream)以及通知系统。
动机 简介 个人评分 动机 你曾经是否想为你自己的网站构建Facebook,Github那种feed流. 简介 通过Stream-Framework1你可以做到: Github那种活动流 Twitte ...
- 手写LVQ（学习向量量化）聚类算法
LVQ聚类与k-means不同之处在于,它是有标记的聚类,设定带标签的k个原型向量(即团簇中心),根据样本标签是否与原型向量的标签一致,对原型向量进行更新. 最后,根据样本到原型向量的距离,对样本进行 ...
- finereport JS 获取按钮所在单元格的值及获取当前报表的变量
1.通过按钮获取单元格所在的值 debugger; var cr; if(window.lineboxes) { var cells = []; for (var i = 0; i < line ...
- logstash 处理信息规律研究
1.input file path => "/opt/50910627.log" path => "/path/to/%{+yyyy/MM/dd/hh}.lo ...
- GS7 安装使用Oracle19c 客户端的说明
1. 最近Oracle放出了 windows版本的oracle19c的安装文件(具体时间不详, 自己知道的时候比较晚了) 2. 发现文件其实比较多如图示: 3. 经过自己测试实现发现 不能使用 如下 ...
- 批量删除Maven本地仓库中未下载完成的jar包（不完整的jar包）
1.删除repository库目录下所有后缀名是.lastUpdated的文件 2.进入maven本地仓库地址: CMD进入windows的路径(或在仓库目录的地址栏直接输入CMD,回车自动打开); ...
- Maven添加镜像仓库、更改本地仓库位置
添加镜像仓库 在conf目录下的settings.xml文件的145行左右 id表示该镜像的id mirrorOf表示为哪个仓库配置镜像,central为默认的中央仓库的id,也可以使用通配符*,来匹 ...
- JWT了解和实际使用
一.JWT JSON Web Token(JWT)是目前最流行的跨域身份验证解决方案.虫虫今天给大家介绍JWT的原理和用法. 1.跨域身份验证 Internet服务无法与用户身份验证分开.一般过程如下 ...