首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

如何判断是pc还是移动

有时候会被别人问起pc手机有什么区别。一般来说都会去说,兼容性啊,适配啊,网页布局这方面的事情,但是我觉得这个问题如果想要拿一个满分应该从区别出发,从如何判断收尾。...Pc手机在事件处理上区别不大,pc没有触屏,手机没有悬停事件,同时手机多了一个键盘的弹出。...动画效果处理上,pc常用js去做动画,手机端去做动画特效会更倾向使用css3 同时相较用户来说,因为触屏的操作尺度非常大,所以在图标按钮的处理上会更倾向于放大一些让用户有一个更好的视觉体验。...关于如何辨别是pc还是手机 这里参照了阮一峰老师9月份的文章,我上网找资料的时候发现很多人不会标注原作者直接转载。只能说阮一峰老师一个人养活了很多博客主。...目前来说比较常用的是通过js去拿navigator.userAgent这个属性,这是一个字符串,如果里面包含mobi,andorid,iphone等关键词就可以判断为移动设备。

2.2K10

vue项目移动pc适配方案

vue项目移动pc适配方案 lib-flexible 根据屏幕宽度,自动设置html的font-size postcss-px2rem 自动将px单位转换成rem 一、第一步先安装 flexible... postcss-px2rem(命令行安装) npm i lib-flexible -S npm i postcss-px2rem -S 简要介绍这两个包的用途: flexible会为页面根据屏幕自动添加标签...二、引入lib-flexible 在项目入口文件main.js 中引入lib-flexible import 'lib-flexible' 注意事项(important): 由于flexible会动态给页面...pc的适配方案,当然手机pc也可以同时适配,前提是页面布局不变。...一般而言,手机pc共用一个项目还是建议使用栅格布局、媒体查询控制。 六、参考 vue中使用rem布局解析+大屏自适应 基于vue cli3的移动适配问题

3.1K30

如何避免 CDN 为 PC 缓存移动页面

❝本题摘自于我 github 上的面试每日一题:https://github.com/shfshanyue/Daily-Question,并有大厂面经及内推信息 ❞ 如果 PC 移动是一套代码则不会出现这个问题...「这个问题出现在 PC 移动是两套代码,却共用一个域名。」...使用 nginx 配置如下,根据 UA 判断是否移动,而走不同的逻辑 (判断UA是否移动容易出问题) location / { // 默认 PC root /usr/local/...website/web; # 判断 UA,访问移动 if ( $http_user_agent ~* "(Android|webOS|iPhone|iPad|BlackBerry...Vary: User-Agent 但最好不要出现这种情况,PC 移动如果是两套代码,建议用两个域名,理由如下 nginx 判断是否移动容易出错 对缓存不友好

1.9K10

PC移动的页面适配及兼容处理

PC移动的页面适配及兼容处理 一、关于移动兼容性 目前针对跨终端的方案,主要分为两大阵营:一套资源Vs两套资源。...思路二:通过终端判断分别调取两套资源以适配所有终端 优势:可根据不同做个性设计及个性化信息推送且可按需加载,如移动可配合重力感应、不同手势做各种炫酷拽效果,pc页面可不受流量限制做适合pc的效果。...zepto作为jquery的移动版本,依然延续其自身优势,大幅优化了移动API且摒弃了兼容”非现代浏览器”的冗余代码,成为移动轻 便可用的js框架代表,对于习惯了jquery的同学来说简直是不二之选...二、pc上的网站在移动端上怎么办?...如果把移动的可视区域(320-768)的话,大部分网站都会因为太窄而显示错乱;所以浏览器默认把viewport设置为一个较宽的值 980px或1024px,至少保证PC网站在移动端上可以显示,只不过出现了横向滚动条而已

2.5K20

React的移动PC生态圈的使用汇总

渲染进程主进程采用remote模块或者ipc通信方式进行通信,进而可以呼叫原生接口 完美解决mac os , windows,linux上的三统一开发没有兼容性问题的框架 Electron 结合了...Chromium、Node.js 用于调用操作系统本地功能的 API(如打开文件窗口、通知、图标等) 基于 Electron的开发就像在开发网页,而且能够无缝地 使用 Node。...react-native,移动跨平台框架 跨平台开发首选Mac,没有为什么 ? 官方推荐的搭建原生完整环境方式 ?...Js与Java通信机制 Java与Js之间的调用,是以两边存在两边存在同一份模块配置表,最终均是将调用转化为{moduleID,methodID,callbackID,args},处理在模块配置表里查找注册的模块与方法并调用...用什么框架,什么技术绘制UI并不重要,但是本人觉得jsreact的无缝对接下更偏向rn,taro,electron这类型的框架开发跨平台应用。

2.5K10

React的移动PC生态圈的使用汇总

`跨平台技术方案,集成`Node`,可以开发极为复杂的应用 渲染进程主进程采用remote模块或者ipc通信方式进行通信,进而可以呼叫原生接口 完美解决mac os, windows,linux上的三统一开发没有兼容性问题的框架...`react-native`,移动跨平台框架 跨平台开发首选Mac,没有为什么 官方推荐的搭建原生完整环境方式 搭建完成后,执行react-native run-ios command+d开启热更新...Js与Java通信机制 Java与Js之间的调用,是以两边存在两边存在同一份模块配置表,最终均是将调用转化为{moduleID,methodID,callbackID,args},处理在模块配置表里查找注册的模块与方法并调用...流程如下图: 参考文章,react-native原理解析,看在react-native跨平台开发的无缝对接jsreact份上,我决定坚定使用它。希望在1.0版本到来的时候,给我们一个惊喜。...用什么框架,什么技术绘制UI并不重要,但是本人觉得jsreact的无缝对接下更偏向rn,taro,electron这类型的框架开发跨平台应用。

2.3K10

React的移动PC生态圈的使用汇总

渲染进程主进程采用remote模块或者ipc通信方式进行通信,进而可以呼叫原生接口 完美解决mac os , windows,linux上的三统一开发没有兼容性问题的框架 Electron 结合了...react-native,移动跨平台框架 跨平台开发首选Mac,没有为什么 ? 官方推荐的搭建原生完整环境方式 ?...Js与Java通信机制 Java与Js之间的调用,是以两边存在两边存在同一份模块配置表,最终均是将调用转化为{moduleID,methodID,callbackID,args},处理在模块配置表里查找注册的模块与方法并调用...参考文章,react-native原理解析,看在react-native跨平台开发的无缝对接jsreact份上,我决定坚定使用它。希望在1.0版本到来的时候,给我们一个惊喜。...用什么框架,什么技术绘制UI并不重要,但是本人觉得jsreact的无缝对接下更偏向rn,taro,electron这类型的框架开发跨平台应用。

2.2K40
领券