检测PC端和移动端的方法总结(转)
2016-06-05 14:42
302 查看
正在苦逼的实习中,昨天公司让做一个页面,涉及到检测终端的问题,如果是手机设备,就跳转到指定的网页上,以前写响应式布局只要用@media screen来实现布局的差异化适应,但是现在不仅仅是布局,还要针对移动端做一些别的动作,所以看了点资料,做个总结
css代码:
js代码:
先上个简化版的,意思意思下
其实还可以用jQuery,but jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version:
通过上面那段代码基本就能检测到我们能常用的移动终端了,但是后来我在stackoverflow发现一哥们检测得更加全面牛逼:
media:查询语句的内容。
matches:如果查询结果为真,值为true,否则为false
代码实现如下:
如果在PC端上使用Window.matchMedia()的话IE10以下是不支持的,但是我们只是用来检测终端哈,IE不支持就算了,移动端上安卓3.0以上都没有问题,so~~
代码实现:
简洁方便~~
github地址 https://github.com/matthewhudson/device.js
不想看英文的孩子,扔个中文教程 https://segmentfault.com/a/1190000000373735
方法一、还是用@media screen
思路:css使用媒体查询,当屏幕小于760px时,使某个元素的样式发生改变,然后通过js检测到这个改变,就可以知道现在切换到移动端了css代码:
方法二、通过navigator.userAgent字符串检测
思路:Navigator对象包含有关浏览器的信息,通过检测userAgent字符串,然后使用正则表达式进行匹配,我们自然就能知道用户是否在使用移动端的浏览器啦先上个简化版的,意思意思下
方法三、通过Window.matchMedia()检测
思路:Window.matchMedia()用来检查mediaquery语句,扔个MDN的传送门。它返回一个MediaQueryList对象。该对象有两个属性media:查询语句的内容。
matches:如果查询结果为真,值为true,否则为false
代码实现如下:
方法四、检测移动端的TouchEvent事件
思路:使用document.createEvent()创建TouchEvent事件,如果成功那就是移动端了,返回true,pc端是没有TouchEvent事件的,所以会出错,返回false代码实现:
方法五、使用Device.js库
这个库就没啥好讲的了,自己跟着套代码就OKgithub地址 https://github.com/matthewhudson/device.js
不想看英文的孩子,扔个中文教程 https://segmentfault.com/a/1190000000373735
相关文章推荐
- 孟加拉央行SWIFT攻击事件恶意木马分析(转)
- android客户端从服务器端获取json数据并解析的实现代码
- iOS开发探究--内存分配和分区
- Android Studio ndk-Jni开发
- Swift语言中的枚举和结构体
- android 项目开发教程网盘分享
- android产品研发(一)-->实用开发规范
- android产品研发(一)-->实用开发规范
- QT 计算器小程序
- Android 模拟MotionEvent事件 触发输入法
- cocos2dx游戏--欢欢英雄传说--添加攻击按钮
- Android项目重构之路:界面篇
- ImageView以淡入淡出的方式切换显示的图片
- Android如何将软键盘回车换成搜索等按钮,EditText中imeOptions属性的使用
- Android 6.0系统中图片剪切空指针崩溃问题解决纪录
- Vitamio在android studio2.2中的集成
- [LeetCode] Android Unlock Patterns 安卓解锁模式
- Android中dp和px之间进行转换
- 微信服务号启用回调后创建菜单
- 关于在项目中使用Android5.0的CoordinatorLayout,上滑无效果的问题