php自动识别pc和手机端并跳转,JS如何实现网站中PC端和手机端自动识别并跳转对应的代码...
1. 代码场景:
描述:在项目中,一般我们会使用响应式布局的方式或者借助bootstrap等插件来做响应式的网站。但是根据业务的需求,手机端可能会在功能上精简很多,我们也会写两套代码,分别用来实现PC端和手机端的功能。此时,就存在一个问题。项目在部署的时候只会使用一个地址,不会针对手机和PC端代码分别进行部署。这个时候就需要我们通过去识别视口分辨率的大小,来自动去跳转对应的代码。
2. 实现方式:
目前网上有很多的方法用来实现PC端和手机端的代码跳转,但我只用了一种实现方式。其他的暂时还没有尝试,希望可以跟大家学到更多的解决方案。在此特别感谢<>的方法给予了我很大的帮助。
此处贴出当前的JS代码:
function mobilePcRedirect() {
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= '手机端跳转页面URL';
} else {
window.location= 'PC端跳转页面URL';
}
};
mobilePcRedirect();
将此方法分别写在手机端和PC端公共的Common.js中,然后在对应位置写入对应的路径即可。
例如:手机端公共JS中代码如下
// 实现网站自动跳转电脑PC端与手机端不同页面
function mobilePcRedirect() {
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) {
console.log("手机端跳转页面URL");
} else {
console.log("PC端跳转页面URL");
// 注:此时写入的是PC端首页跳转路径
window.location.href = getBasePath() + "/education/new_index.html";
}
};
mobilePcRedirect();
反之,PC端公共JS中同样的写法即可。
3. 拓展内容(如何获取项目的根路径?)
获取项目名称:
/**
* 获取项目名称 如:/video_learning
**/
function getProjectName() {
var strPath = window.document.location.pathname;
var postPath = strPath.substring(0,strPath.substr(1).indexOf('/')+1);
return postPath;
}
获取项目全路径:
/**
* 获取项目全路径 如:http://localhost:8080/video_learning
* */
function getBasePath(){
//获取当前网址
var curWwwPath=window.document.location.href;
//获取主机地址之后的目录
var pathName=window.document.location.pathname;
var pos=curWwwPath.indexOf(pathName);
//获取地址到端口号
var localhostPath=curWwwPath.substring(0,pos);
//项目名
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
return (localhostPath+projectName);
}
本次分享已完成,大家若有更好的方法或者意见欢迎指正学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
php自动识别pc和手机端并跳转,JS如何实现网站中PC端和手机端自动识别并跳转对应的代码...相关推荐
- html自动跳转手机端,用JavaScript实现网站自动跳转电脑PC端与手机端不同页面
前天,有一个网友希望在其微擎系统跳转的时候实现鉴别用户不同的客户端,比如电脑PC端和手机端,实现不同的页面跳转.对于之前老蒋有给其设置过PC端网站然后检测手机访问的时候跳转到WAP网站的案例,对于这个 ...
- PC端和手机端入口一致,跳转不同格式页面的解决方案
如:PC端接口请求后跳转到jsp页面,手机端请求接口后跳转到html页面,两个客户端公用一个入口(index.do). // 跳转首页@RequestMapping(value = "/in ...
- html手机pc不同页面,PC端和手机端如何同时生成静态页
静态页是和图片类似的静态资源,访问静态资源不会经过程序处理,不会根据浏览器返回不同页面.要同时支持PC端和手机端浏览器,且要生成静态页时,最好使用bootstrap之类的技术,实现自适应页面设计. 如 ...
- vueweb端响应式布局_响应式网站和PC+手机端网站有什么区别?
企业建站普遍会遇到这样一个选择难题:网站选择什么类型? 常见的类型分为3种:PC端,PC+手机端,响应式.PC端大家都知道,主要的选择难点是后两种有什区别.今天小编就帮大家来分析一下响应式网站和PC+ ...
- 【工具】PC端调试手机端 Html 页面的工具
一.概述 有一个项目需要在手机端显示一个 web 页面,而每次把应用 launch 后,从手机端看比较麻烦,因此搜罗了几种在 PC 端调试手机端页面的工具. 二.工具 http://fonkie.it ...
- [html] 制作一个页面时,需要兼容PC端和手机端,你是要分别做两个页面还是只做一个页面自适应?为什么?说说你的理由
[html] 制作一个页面时,需要兼容PC端和手机端,你是要分别做两个页面还是只做一个页面自适应?为什么?说说你的理由 两个页面 pc端布局和交互行为跟移动端不一样, 两个页面反而更好维护 个人简介 ...
- JavaScript 代码判断:PC端和手机端
js代码· 示下: <script> if ((navigator.userAgent.match(/(phone|pad|pod|iPad|iPod|iPhone|ios|Android ...
- PC端、手机端在线预览文档组件react-file-viewer与npm构建内存溢出
用户上传文件后,pc端可以下载文件,但是手机端下载文件就很不方便,手机的端需要直接将附件查看,所以需要 react-file-viewer 这个npm包 可以根据自己本地开发环境npm的配置通过命令, ...
- 前端pc端、手机端适配基本知识
前端pc端.手机端适配问题 一个项目如何做到手机.电脑共用的方式 1.第一种方式:响应式布局(栅格布局),即通过媒体查询控制css样式,从而实现一套代码手机.电脑共享.一般而言,手机.电脑共享样式,其 ...
最新文章
- CocoaPods的安装失败方法
- 【沟通交流】弱关系向强关系的转变
- C++ Primer 5th笔记(chap 14 重载运算和类型转换)类类型转换
- 安卓开发仿微信图片拖拽_使用Android 模仿微信朋友圈图片拖拽返回
- checkVector()
- Scala父类构造方法
- Vue——props默认值为工厂函数时[工厂函数:undefined]问题解决方案
- 在SQL Server 2005中解决死锁(转)
- Linux20180528 apache结合php 虚拟主机
- APPCAN学习笔记001---app快速开发AppCan.cn平台概述
- [搬运] mac下安装GDB
- java设计模式--基础思想总结--抽象类与架构设计思想
- spark 算子使用类变量_Scala与Spark是天生的一对?
- HTML和XHTML解析(HTMLParser、BeautifulSoup)
- Java主流框架技术及少量前端框架使用与总结
- Android 清理app缓存数据的方法
- 愿你出走半生,归来仍是少年——2017年半年总结(下)
- Windows自带远程连接Ubuntu桌面
- 人工智能现在的技术“好玩”到了什么程度?
- 启动计算机时听到嘀嘀声,为何电脑开机时会有滴滴的声音?