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

如何判断是pc还是移动

有时候会被别人问起pc手机有什么区别。一般来说都会去说,兼容性啊,适配啊,网页布局这方面的事情,但是我觉得这个问题如果想要拿一个满分应该从区别出发,从如何判断收尾。...从区别入手 Pc需要考虑是浏览器兼容性,不能局限于我们常用谷歌浏览器,要为客户那边考虑,而手机需要为不同型号做考虑,安卓ios华为。同时也要更多考虑手机分辨率适配。...这里会巩固你项目经验。 Pc手机在事件处理上区别不大,pc没有触屏,手机没有悬停事件,同时手机多了一个键盘弹出。...动画效果处理上,pc常用js去做动画,手机端去做动画特效会更倾向使用css3 同时相较用户来说,因为触屏操作尺度非常大,所以在图标按钮处理上会更倾向于放大一些让用户有一个更好视觉体验。...目前来说比较常用是通过js去拿navigator.userAgent这个属性,这是一个字符串,如果里面包含mobi,andorid,iphone等关键词就可以判断为移动设备。

2.2K10

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

PC移动页面适配及兼容处理 一、关于移动兼容性 目前针对跨终端方案,主要分为两大阵营:一套资源Vs两套资源。...思路二:通过终端判断分别调取两套资源以适配所有终端 优势:可根据不同做个性设计及个性化信息推送且可按需加载,如移动可配合重力感应、不同手势做各种炫酷拽效果,pc页面可不受流量限制做适合pc效果。...zepto作为jquery移动版本,依然延续其自身优势,大幅优化了移动API且摒弃了兼容”非现代浏览器”冗余代码,成为移动轻 便可用js框架代表,对于习惯了jquery同学来说简直是不二之选...二、pc网站在移动端上怎么办?...设备屏幕尺寸 单位是物理像素 screen.width 获取 屏幕尺寸是不变 在该viewport中用户不需要缩放横向滚动就可以正常查看网站所有内容 设置移动网站一般以这个viewport为准

2.5K20

vue项目移动pc适配方案

vue项目移动pc适配方案 lib-flexible 根据屏幕宽度,自动设置htmlfont-size postcss-px2rem 自动将px单位转换成rem 一、第一步先安装 flexible... postcss-px2rem(命令行安装) npm i lib-flexible -S npm i postcss-px2rem -S 简要介绍这两个包用途: flexible会为页面根据屏幕自动添加标签...vue-cli3 项目中vue.config.js中(找不到?...,所以此方案只适用于纯手机或者pc适配方案,当然手机pc也可以同时适配,前提是页面布局不变。...一般而言,手机pc共用一个项目还是建议使用栅格布局、媒体查询控制。 六、参考 vue中使用rem布局解析+大屏自适应 基于vue cli3移动适配问题

3.1K30

React移动PC生态圈使用汇总

个人建议,在Node.js开发React native以及大型React中使用TypeScript 在下载官方react脚手架中,包含了一个第三方ts创建脚手架命令 在 Create React...渲染进程主进程采用remote模块或者ipc通信方式进行通信,进而可以呼叫原生接口 完美解决mac os , windows,linux上统一开发没有兼容性问题框架 Electron 结合了...github上star量也快80K了。 ? 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上统一开发没有兼容性问题框架...,可能会写到大量底层Node.js原生javascript,目前开发IM项目很多使用这个框架。...`react-native`,移动跨平台框架 跨平台开发首选Mac,没有为什么 官方推荐搭建原生完整环境方式 搭建完成后,执行react-native run-ios command+d开启热更新...Js与Java通信机制 Java与Js之间调用,是以两边存在两边存在同一份模块配置表,最终均是将调用转化为{moduleID,methodID,callbackID,args},处理在模块配置表里查找注册模块与方法并调用...用什么框架,什么技术绘制UI并不重要,但是本人觉得jsreact无缝对接下更偏向rn,taro,electron这类型框架开发跨平台应用。

2.3K10

React移动PC生态圈使用汇总

渲染进程主进程采用remote模块或者ipc通信方式进行通信,进而可以呼叫原生接口 完美解决mac os , windows,linux上统一开发没有兼容性问题框架 Electron 结合了...,可能会写到大量底层Node.js原生javascript,目前开发IM项目很多使用这个框架。...github上star量也快80K了。 ? react-native,移动跨平台框架 跨平台开发首选Mac,没有为什么 ? 官方推荐搭建原生完整环境方式 ?...Js与Java通信机制 Java与Js之间调用,是以两边存在两边存在同一份模块配置表,最终均是将调用转化为{moduleID,methodID,callbackID,args},处理在模块配置表里查找注册模块与方法并调用...用什么框架,什么技术绘制UI并不重要,但是本人觉得jsreact无缝对接下更偏向rn,taro,electron这类型框架开发跨平台应用。

2.2K40

Z-blogPHP网站PC移动显示不同广告教程

关于自适应大家应该有了一定了解,但是之前一直在想,怎么实现PC移动显示不同广告,前段时间因为工作,所以一直在忙,逐渐也就忘记了这件事。...偶然间在百度看到了一篇wp实现不同广告介绍,于是又百度下zbp能否实现,测试过之后真的可以(然后最悲催是,官方群有针对自适应显示不同广告教程,但却,,,不好使^_^)。 ?...添加如下代码: //PC移动显示不同广告 function brieflee_is_mobile(){     global $zbp;     $is_mobile = false;     $...然后在想显示不同广告区域添加如下代码: {if brieflee_is_mobile()}     显示移动广告 {else}     显示PC广告 {/if} 然后保存,后台首页清空缓存重新编译模板...本站主题广告后台展示,想要赶快点击连接:Brieflee主题-把最好送给你

67840

如何避免 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页面布局区别、background-size 背景图片缩放

视口 视口是移动设备上用来显示网页区域,一般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为了显示下整个为PC设计网页,这样带来后果是移动会出现横向滚动条,为了避免这种情况...,移动会将视口缩放到移动窗口大小。...这样会让网页不容易观看,可以用 meta 标签,name=“viewport ” 来设置视口大小,将视口大小设置为移动设备可视区一样大小。... pc移动渲染网页过程: ? 使用视口解决上面的div显示太小问题 ? ? 设置了视口之后,div显示比较正常了。...倍视网膜屏幕3倍视网膜屏幕,2倍视网膜屏幕,它物理像素点大小是一般屏幕1/4,3倍视网膜屏幕,它物理像素点大小是一般屏幕1/9。

2.9K20

Fluid -3- pdf.js PC,移动查看 PDF

hexo 有各种支持pdf查看方案,但大多不同时支持移动PC,本文记录使用 pdf.js 实现各设备查看 pdf 方法。...简介 pdf.js 是用于解析呈现 PDF 基于 Web 标准平台通用解决方案,功能强大。...官方网站:https://mozilla.github.io/pdf.js/ 下载 pdf.js 官网地址:https://mozilla.github.io/pdf.js/ 新版本不支持部分浏览器,为了更好兼容性...,下载旧版本浏览器文件包 点击 Download 按钮 下载并解压相关内容 修改 viewer.js 直接使用下载文件会报错 Error: file origin does not match viewer's...需要注释掉 web/viewer.js 文件中相应内容: 加入主题 将下载文件夹命名为 pdfjs,拷贝到 themes/fluid/source/js 中 使用方法 在markdown 文档中使用

8.7K30
领券