如何判断是pc端还是移动端

简介: 如何判断是pc端还是移动端

有时候会被别人问起pc端和手机端有什么区别。一般来说都会去说,兼容性啊,适配啊,网页布局这方面的事情,但是我觉得这个问题如果想要拿一个满分应该从区别出发,从如何判断收尾。毕竟你只知道区别没有用,他可能更想让你说出来你是怎么判断的。


像是面试的时候如果你自己主动说出来扯一堆王八犊子也很能拖延时间。说不定会给面试加分。


从区别入手


Pc端需要考虑的是浏览器的兼容性,不能局限于我们常用的谷歌浏览器,要为客户那边考虑,而手机端需要为不同的型号做考虑,安卓ios华为。同时也要更多考虑手机分辨率的适配。不同操作系统的细微差异。


在布局上,手机端因为要去做布局的自适应,所以可以围绕rem去说一说


关于接口上,手机端会多出很多常见功能,比如微信的支付接口,微信的朋友圈转发,分享文章什么的,支付宝的支付接口,包括高德地图百度地图的这些接口,都是做app会常用的,如果你是一个经验丰富的前端。这里会巩固你的项目经验。


Pc端和手机端在事件处理上区别不大,pc端没有触屏,手机端没有悬停事件,同时手机端多了一个键盘的弹出。


动画效果处理上,pc常用js去做动画,手机端去做动画特效会更倾向使用css3


同时相较用户来说,因为触屏的操作尺度非常大,所以在图标和按钮的处理上会更倾向于放大一些让用户有一个更好的视觉体验。


关于如何辨别是pc端还是手机端


这里参照了阮一峰老师9月份的文章,我上网找资料的时候发现很多人不会标注原作者直接转载。只能说阮一峰老师一个人养活了很多博客主。


目前来说比较常用的是通过js去拿navigator.userAgent这个属性,这是一个字符串,如果里面包含mobi,andorid,iphone等关键词就可以判断为移动设备。


if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {

// 当前设备是移动设备


}


// 另一种写法


if (


navigator.userAgent.match(/Mobi/i) ||


navigator.userAgent.match(/Android/i) ||


navigator.userAgent.match(/iPhone/i)


) {

// 当前设备是移动设备


}


然后有一个更简单的方法就是通过屏幕宽度判断是否为手机。直接获取window.screen。由于手机端屏幕普遍干不过电脑端,所以可以很简单的去识别是否为手机。


Window还提供了一种方法为window.orientation,这个属性用于判断手机是否是横屏,如果不是移动设备的话你获取这个属性会返回undefined。


第四种是触发touch事件,通过trycatch去为手机端的dom元素执行touch事件,如果捕获异常则证明是pc端。


其他的可以通过各种工具包轮子去判断。常用方法大概就这几种。


目录
相关文章
|
PHP
php中如何判断用户是PC端还是移动端
在移动端快速发展的今天,手机的日常使用率早已大大超过电脑,而对于网页开发中也相应存在对应的需求————对于某些页面,PC端和移动端点击时分别进入不同的页面
231 0
php中如何判断用户是PC端还是移动端
|
7月前
|
监控 安全 Linux
基于PC的控制技术编程入门
基于PC的控制技术编程入门
|
8月前
|
Web App开发 JavaScript 前端开发
SAP UI5 在 PC 端浏览器和移动设备使用摄像头进行条形码扫描的几种解决方案介绍
SAP UI5 在 PC 端浏览器和移动设备使用摄像头进行条形码扫描的几种解决方案介绍
71 0
判断手机端还是ipod还是PC(整理)
判断手机端还是ipod还是PC(整理)
|
9月前
|
Web App开发 前端开发 JavaScript
如何判断页面是通过PC端还是移动端访问?
如何判断页面是通过PC端还是移动端访问?
464 0
|
JavaScript 前端开发 iOS开发
移动端页面如何优雅的适配各种屏幕,包括PC端
本文为Varlet组件库源码主题阅读系列第八篇,读完本篇,可以了解到移动端页面如何适配各种尺寸的屏幕,包括pc端,另外如何将触摸事件转换成鼠标事件。
385 0
|
JavaScript Android开发 iOS开发
兼容安卓和ios的手机端浏览器返回和物理返回的监听处理操作实战(推荐)
兼容安卓和ios的手机端浏览器返回和物理返回的监听处理操作实战(推荐)
272 0
兼容安卓和ios的手机端浏览器返回和物理返回的监听处理操作实战(推荐)
|
Web App开发 JavaScript 前端开发
SAP UI5 在 PC 端浏览器和移动设备使用摄像头进行条形码扫描的几种解决方案介绍(一)
SAP UI5 在 PC 端浏览器和移动设备使用摄像头进行条形码扫描的几种解决方案介绍
164 0
SAP UI5 在 PC 端浏览器和移动设备使用摄像头进行条形码扫描的几种解决方案介绍(一)
|
存储 移动开发 Apache
SAP UI5 在 PC 端浏览器和移动设备使用摄像头进行条形码扫描的几种解决方案介绍(二)
SAP UI5 在 PC 端浏览器和移动设备使用摄像头进行条形码扫描的几种解决方案介绍
236 0
SAP UI5 在 PC 端浏览器和移动设备使用摄像头进行条形码扫描的几种解决方案介绍(二)
|
编解码
只有PC可以玩原生4K《英灵殿》?你可能想多了
今年微软和索尼将推出次世代主机,育碧作为全球知名游戏厂商今年也有两款3A大作将要上市,《刺客信条:英灵殿》和《看门狗:军团》。
213 0
只有PC可以玩原生4K《英灵殿》?你可能想多了

热门文章

最新文章