电脑PC页面和手机移动页面适配跳转
电脑PC页面和手机移动页面适配跳转
html页面,涉及到检测终端的问题,如果是电脑端,就跳到PC版页面;如果是手持端设备,就跳转到指定的shou网页上。
方法一、@media screen
思路:css使用媒体查询,当屏幕小于760px时,使某个元素的样式发生改变,然后通过js检测到这个改变,就可以知道现在切换到移动端了
css代码:
1
2
3
4
|
/* 检测小屏幕- */
@media only screen and ( max-width : 760px ) {
#someElement { display : none ; }
}
|
js代码:
if( getClass(document.getElementById('someElement'),'display') === 'none') {window.location.href = '' //链接手机端网页} else {window.location.href = '' //链接电脑端网页}//兼容获取非行间样式function getClass(obj,name){if(obj.currentStyle){return obj.currentStyle[name];//IE下获取非行内样式}else{return getComputedStyle(obj,false)[name];//FF、Chorme下获取非行内样式}}
方法二、通过navigator.userAgent字符串检测
思路:Navigator对象包含有关浏览器的信息,通过检测userAgent字符串,然后使用正则表达式进行匹配,我们自然就能知道用户是否在使用移动端的浏览器啦
先上个简化版的,意思意思下
1
2
3
4
5
6
7
8
|
var isMobile = false ;
// 检测userAgent
if ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
isMobile = true ;
}
if (isMobile){
//移动端的处理逻辑
}
|
其实还可以用jQuery,but jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version:
1
|
$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
|
通过上面那段代码基本就能检测到我们能常用的移动终端了,但是后来我在stackoverflow发现一哥们检测得更加全面牛逼:
1
2
3
4
5
6
7
8
|
var isMobile = false ; //默认PC端
// 检测userAgent
if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob| in )i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
|| /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob| do (c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de| do |t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4)))
{
isMobile = true ;
}
if (isMobile){<br> //移动端的处理逻辑<br>}
|
方法三、通过Window.matchMedia()检测
思路:Window.matchMedia()用来检查mediaquery语句,扔个MDN的传送门。它返回一个MediaQueryList对象。该对象有两个属性
media:查询语句的内容。
matches:如果查询结果为真,值为true,否则为false
代码实现如下:
1
2
3
4
5
|
var isMobile = false ; //默认PC端
var result = window.matchMedia( "<code>only screen and</code> (max-width: 760px)" );
if (result.matches){
isMobile = true ;
}
|
如果在PC端上使用Window.matchMedia()的话IE10以下是不支持的,但是我们只是用来检测终端哈,IE不支持就算了,移动端上安卓3.0以上都没有问题,so~~
方法四、检测移动端的TouchEvent事件
思路:使用document.createEvent()创建TouchEvent事件,如果成功那就是移动端了,返回true,pc端是没有TouchEvent事件的,所以会出错,返回false
代码实现:
1
2
3
4
5
6
7
8
9
10
11
|
var isMobile = false ; //默认PC端
function mobile() {
try {
document.createEvent( "TouchEvent" );
return true ;
}
catch (e){
return false ;
}
}
isMobile=mobile();
|
简洁方便~~
方法五、使用Device.js库
这个库就没啥好讲的了,自己跟着套代码就OK
github地址 https://github.com/matthewhudson/device.js
不想看英文的孩子,扔个中文教程 https://segmentfault.com/a/1190000000373735
电脑PC页面和手机移动页面适配跳转相关推荐
- 自动适配跳转电脑PC端和手机WAP端
//首先获取浏览器所在系统平台对象 let sUserAgent = navigator.userAgent.toLowerCase();//用正则滤出平台名称,如符合以下条件则跳转移动端,并作跳转 ...
- 网页版php手机端怎么转wap页,用dw做的普通网页和wap网页,要怎样做才能让pc浏览器和手机浏览器自动识别并跳转呢?...
手机版网站(或者叫wap网站),是指用WML编写的专门用于手机浏览的网站,通常以文字信息和简单的图片信息为主. 如今:网络流量,移动流量呈上升趋势,很多领域,移动流量已经超过pc端流量. 而由于移动设 ...
- html自动跳转手机端,用JavaScript实现网站自动跳转电脑PC端与手机端不同页面
前天,有一个网友希望在其微擎系统跳转的时候实现鉴别用户不同的客户端,比如电脑PC端和手机端,实现不同的页面跳转.对于之前老蒋有给其设置过PC端网站然后检测手机访问的时候跳转到WAP网站的案例,对于这个 ...
- 手机h5 页面扫码上传图片 同步显示到pc端
还是那句老话 一切技术为公司业务服务! 这不这天产品又来新思路了,小赵啊,我们的客户不想每次上传图片还得跑到电脑上传,能不能手机扫码 ,在手机上拍照点击上传 就自动显示到pc上了 我说可以啊,用户扫码 ...
- 手机WEB页面自动化_在电脑上模拟手机模式页面实现自动化
场景:PC 工具:selenium + webdriver 元素调试:PC浏览器F12设置为手机模式 自动化:手机模式打开web页面 手机模式打开web页面 1.代码示例 # 在电脑上模拟手机模式页面 ...
- h5微信页面在手机微信端和微信web开发者工具中都能正常显示,但是在pc端微信浏览器上打不开(显示空白)
记录一个最近在微信端页面开发时出现的问题:页面在手机微信端和微信web开发者工具中都能正常显示,但是在pc端微信浏览器上打不开(显示空白). 原因:pc端微信浏览器不支持es6,而我的代码使用了 le ...
- h5微信页面在手机微信端和微信web开发者工具中都能正常显示,但是在pc端微信浏览器上打不开(显示空白)...
h5微信页面在手机微信和微信开发者工具中都能正常显示,但是在pc端微信浏览器上打不开或者数据加载不出来. 原因:pc端微信浏览器不支持ES6语法,我的代码中使用了一些ES6的特性 解决:将ES6转换为 ...
- NGINX适配网站的PC版和手机版
考虑到网站的在多种设备下的兼容性,有很多网站会有手机版和电脑版两个版本.访问同一个网站URL,当服务端识别出用户使用电脑访问,就打开电脑版的页面,用户如果使用手机访问,则会得到手机版的页面. 1.判断 ...
- Linux手机适配,nginx同时适配PC版和手机移动版
项目有个需求,同时存在PC版和手机移动版的页面,全是静态页面,运行在nginx 下,想要同时适配PC版和手机移动版. 即同一个 URL ,用PC访问量加载PC版页面,用手机访问时加载手机版页面. 由于 ...
最新文章
- haproxy参数优化
- No Fine-Tuning, Only Prefix-Tuning
- python源码编译 mingw_使用 MinGW 编译 C/C++ 写的 python 扩展
- 查看博客模板的css代码
- SpringSecurity分布式整合之验证认证的过滤器
- [ 转载 ] Java面试精选【Java基础第一部分】
- this指向问题(2)
- Linux内核机器ID,linux-如何强制内核重新读取/重新初始化PCI设备ID?
- 播放视频中称比例的计算
- 金三银四Java面试的一些感受,实战篇
- 生产常见问题及解决方案与深度分析
- python获取某天的属于第几周等时间问题
- 先安装windows7_64bit,再安装Centos7,windows7的启动项不出现
- Spring MVC实现服务端数据验证 服务端数据校验 Spring Boot 服务端数据校验
- 大数据之CDH(web页面部署Hadoop)
- python实现匿名发邮件_Python 实现邮件发送
- 将yolo格式数据集转换为coco格式数据集
- 国美、腾讯的困惑:廉颇老矣,尚能战否?
- 【R语言】常用基本函数
- 语法分析程序--编译原理
热门文章
- Android 使用gif 动图
- java--(三)类与对象
- 【OCR识别验证码】--基于tesseract
- roku能不能安装软件_如何从Roku主屏幕上删除Fandango电影和电视商店
- 苹果cms精仿某果Tv超美听书模板源码
- python安装和pip安装diango
- 阿里云服务器ECS第七代c7/g7/r7/c7t/g7ne/g7t/r7t参数性能详解!
- 测肺活量可以用手机 SpiroSmart将音频转为风量
- 如何查看每个城市的生意如何?
- Autodesk Inventor Pro 2023 三维机械设计软件安装说明