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

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

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

    2.5K10

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

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

    2.8K20

    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会为页面根据屏幕自动添加标签...vue-cli3 项目中vue.config.js中(找不到?...,所以此方案只适用于纯手机端或者pc端的适配方案,当然手机端、pc端也可以同时适配,前提是页面布局不变。...一般而言,手机端、pc端共用一个项目还是建议使用栅格布局、媒体查询控制。 六、参考 vue中使用rem布局解析+大屏自适应 基于vue cli3的移动端适配问题

    3.8K30

    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并不重要,但是本人觉得js和react的无缝对接下更偏向rn,taro,electron这类型的框架开发跨平台应用。

    2.6K10

    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并不重要,但是本人觉得js和react的无缝对接下更偏向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并不重要,但是本人觉得js和react的无缝对接下更偏向rn,taro,electron这类型的框架开发跨平台应用。

    2.3K40

    Flex布局:兼容移动端与PC端的CSS魔法

    Flex布局的出现,极大地简化了前端开发者的工作,使得复杂的布局变得简单易懂。 二、Flex布局在移动端的应用 移动端设备屏幕尺寸多样,用户操作习惯也各不相同。...因此,在移动端应用中,Flex布局能够发挥出巨大的优势。以下是一个简单的Flex布局在移动端的应用示例: 和justify-content: space-between,我们可以实现项目在容器内的自动换行和均匀分布。...三、Flex布局在PC端的应用及兼容性问题 虽然Flex布局在移动端表现出色,但在PC端使用时也需要考虑兼容性问题。低版本的浏览器可能不支持Flex布局,这就需要我们采取一些兼容性措施。...以下是一个兼容PC端的Flex布局示例: <!

    20110

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

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

    72540

    如何避免 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 判断是否移动端容易出错 对缓存不友好

    2K10

    移动端与PC端页面布局区别、background-size 背景图片的缩放

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

    3K20
    领券