- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端小叙
移动端适配解决方案
优化以前写过的一篇文章：https://www.cnblogs.com/beileixinqing/p/11283315.html 目前常见移动端适配方案 1、媒体查询 通过写媒体查询，在不同的分辨率下写对应不同的样式 3、通过视口单位（ Viewport units ) 在业界，极为推崇的一种理论是 Peter-Paul Koch (江湖人称“PPK大神”)提出的关于视口的解释——在桌面端，视口指的是在桌面端，指的是浏览器的可视区域 ；而在移动端较为复杂，它涉及到三个视口：分别是 Layout Viewport（布局视口）、 Visual Viewport（视觉视口）、Ideal Viewport。 而视口单位中的“视口”，在桌面端，毫无疑问指的就是浏览器的可视区域；但是在移动端，它指的则是三个 Viewport 中的 Layout Viewport 。 ? 兼容性 其兼容性如下图所示，可以知道：在移动端 iOS 8 以上以及 Android 4.4 以上获得支持，并且在微信 x5 内核中也得到完美的全面支持。 ? 截图来自Can I Use ?
2.1K30发布于 2020-09-27 - 来自专栏h5学习笔记
移动端click 延时解决方案
移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。 解决方案： 1. 禁用缩放。 <meta name="viewport" content="user-scalable=no"> 2.利用touch事件自己封装这个事件解决300ms 延迟。
1.3K30发布于 2020-10-09 - 来自专栏前端导学
移动端缩放解决方案 hammerjs
ev.type === 'doubletap') { transform = 'translate3d(0, 0, 0) ' + 'scale3d(2, 2, 1) '; scale = 2; last_scale = 2; try { if (window.getComputedStyle posY = last_posY + ev.deltaY; max_pos_x = Math.ceil((scale - 1) * el.clientWidth / 2) ; max_pos_y = Math.ceil((scale - 1) * el.clientHeight / 2); if (posX > max_pos_x) {
3.6K20发布于 2019-07-02 - 来自专栏XC's Blog 日常笔记
移动端最佳适配解决方案
移动端最佳适配解决方案 移动端rem的适配已经淘汰了，目前大家使用的都是viewport。lib-flexible作者也在github明确地表示lib-flexible这个解决方案可以放弃使用了。 本文带大家一起来看看评论区所说的viewport适配解决方案。 什么是viewport viewport翻译成中文的意思大致是视图、视窗。在移动端设备中,整块显示屏就相当于视图、视窗。 因为在移动端设备中,浏览器视图并不是整个屏幕。 目的是为了获取到不同移动端设备下的像素比。对于rem的适配该库是至关重要的。本篇文章使用viewport适配则不再需要。 同理 这对于其他的移动端UI组件库同样有效果。
2.1K30编辑于 2023-02-27 - 来自专栏万少的技术分享
移动端滚动分页解决方案
什么是移动端滚动分页 当用户滑动页面到底部时，便会触发页面的加载分页数据功能 解决方案 解决方案 目前主流的解决方案主要有两个，scroll 和 IntersectionObserver scroll 它可以用于检测元素是否进入或离开视口（viewport），或者与其他元素发生交叉 scroll 目前m端淘宝采用的是 scroll，它的特点是兼容性够好。 { resolve(); }, time); }) } </script> </body> </html> 效果如下 总结 目前主流的解决方案主要有两个
1.5K10编辑于 2025-02-10 - 来自专栏ocr
移动端与云端身份证识别的差别
移动端身份证识别产品描述 移动端身份证识别SDK是基于移动平台的身份证识别应用程序，支持Android、iOS移动操作系统。 手机移动端身份证识别优势 1、识别率高，识别速度快：身份证识别率高达98%，识别速度小于1秒； 2、支持多种证件识别：可识别二代身份证、驾驶证、行驶证、护照、港澳台通行证等； 3、扫一扫，识别信息：采用视频识别 .png 移动端身份证识别软件拍摄规范（规范的拍摄有助于提高识别率） 1、光照，拍摄时注意光照的影响，尽量避免反光和黑影； 2、角度，不要使拍摄角度倾斜过大，以免造成图像严重变型； 3、背景，少留背景 移动端身份证识别技术不仅仅用在金融行业，各行业都能得以应用，只要关乎录入身份证信息的，都能使用，手机移动端身份证识别技术让需要实名应用更加方便，快捷，提高用户体验，为人们解决繁琐输入的问题。 云端素材.png 功能特点： 1.识别身份证种类多：可识别汉族身份证、少数名族身份证、港门身份证、台湾身份证，香港身份证，及部分国外身份证件； 2.支持多进程识别方式：可以在同一服务器上开启多个识别进程
3.1K10发布于 2020-06-08 - 来自专栏前端小课堂
移动端1px解决方案
背景 在移动端，css中的1px并等于移动设备的1px，因为手机屏幕有不同的像素密度。 所以造成了通过css设置1px，在移动端屏幕上会变粗。 解决方案一：使用伪类缩放 使用伪类缩放需要主要的是： 设置全边框的时候，box-sizing要设置为border-box，否则伪元素上下左右各会多1px 需要将父元素设置为relative 注意 transform // 使用less函数.border .border(1px, solid, red); // 使用less函数.border-radius .border-radius(20px); } 解决方案三 0 stretch; } 缺点：不够灵活，换颜色需要换图片 解决方案四：使用box-shadow模拟 .box-shadow-1px { width: 100px; height: 100px
2.1K20发布于 2019-09-04 - 来自专栏前端小课堂
移动端吸顶fixbar解决方案
在PC端主要的实现是通过 CSS 的 position: fixed 属性，但是在移动端，尤其是在安卓端，存在诸多的兼容性问题。 问题 position：fixed给移动端带来的问题： IOS8在页面滚动时，吸顶不连续；页面滑动时，不见吸顶，页面滚动停止后，吸顶缓慢出现 滚动到顶部之后，会出现两个一样的吸顶, 过一会才恢复正常。 三星i9100(S2) / 自带浏览器，在滚屏过程中，fixed定位异常，touchend之后恢复正常。 解决方案 分别处理各个问题： IOS 在IOS端，使用 position： sticky 这个属性，使用类似于 position: relative 和 position: absolute 的结合体 2、sticky元素的底部，不能和父级底部重叠。
3.7K30发布于 2019-09-04 腾讯云云手机：基于ARM板卡与超低延时音视频技术的云端移动端解决方案
一、产品定位与核心亮点 技术定义：腾讯云云手机是基于ARM板卡结合超低延时音视频技术，提供流畅操控体验的云端手机服务。 核心亮点：支持OpenClaw云手机一键部署、可视化面板配置、快速接入，实现“龙虾”等应用从桌面端向手机端场景的无缝拓展，丰富移动端玩法，免本地部署成本。 二、产品应用场景 适用于需将桌面端应用（如OpenClaw养龙虾场景）快速拓展至移动端、避免本地复杂部署、追求流畅移动端操控体验的用户。 其业务痛点在于传统移动端接入桌面端应用存在部署门槛高、操控体验割裂等问题，腾讯云云手机通过云端化方案解决此类场景需求（据原文）。 与本地手机一致GUI界面操作； 云手机内一键配置，开箱即用； 云手机镜像预装OpenClaw； 手机界面快速配置模型和通道； 安全隔离，数据更安全； 云上环境与本地数据安全隔离； 支持云端手机备份
27210编辑于 2026-04-03- 来自专栏FinGet前端之路
移动端1px边框解决方案
webkit-transform: scaleY(0.7); transform: scaleY(0.7); } } @media (-webkit-min-device-pixel-radio: 2) , (min-device-pixel-radio: 2) { border-1px::after { -webkit-transform: scaleY(0.5); transform
83110发布于 2019-06-28 - 来自专栏一路向前端
移动端事件穿透的原理与解决方案
移动设备的流行，带动了移动互联网的快速发展，很多开发者开始进入移动开发领域。 目前市面上主流的移动设备一般都使用触摸屏，触摸屏所使用的触摸事件模型与传统网页的鼠标事件模型有所区别，这种差异往往使初涉移动端的开发工程师陷入困境，事件穿透问题便是其中一个，本文将带你了解事件穿透及如何在实际项目中选择合适的方案解决事件穿透问题 产生的原因 当今，主流的移动设备一般都使用触摸屏，Web 应用程序可以使用触摸事件（Touch Events）直接处理基于触摸的输入，或者应用程序可以使用可解释的鼠标事件以处理应用程序的输入。 touchmove：当触摸点沿触摸表面移动时触发。 touchend：当触摸点从触摸表面移除时触发。 touchcancel：当触摸点以实现特定的方式中断（例如，创建的触摸点太多）时触发。 在实际项目开发中，纯移动端项目优先推荐禁用 click 事件的方法，多端项目优先推荐禁用 touch 事件的方法。
2.1K20发布于 2020-07-27 - 来自专栏IMWeb前端团队
移动端图片上传旋转、压缩的解决方案
var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d canvas.height = imgWidth; ctx.rotate(Math.PI / 2) canvas.height = imgWidth; ctx.rotate(3 * Math.PI / 2)
3.4K20发布于 2019-12-03 - 来自专栏青梅煮码
移动端常见问题解决方案
important; } /*火狐*/ input[type="number"] { -moz-appearance: textfield; } 二、功能代码片段 禁止文本缩放 当移动设备横竖屏切换时 { autoResize() } })() 样式初始化css： normalize.css – 官网下载 normalize.css – github 三、meta标签设置 适应移动端
2.2K10编辑于 2023-03-02 - ); }; 总结 开发耗费时间比较长的地方是怎么设计与移动端同步数据和拖拽功能来自专栏趣谈前端
可视化搭建移动端店铺解决方案
其实这种功能在零售系统（目前我所在公司是零售行业的领头羊）和电商系统应该很常见，很多应用场景都会用到，像产品营销页面、企业/个人微官网、H5活动页面等移动端页面，通过可视化配置快速搭建H5页面，且提供丰富的页面组件 PC端界面如下： ? PC端界面 移动端（H5和小程序）界面如下： ? ? 技术方案 PC端 React 技术栈，移动端 UniApp 跨平台框架，功能的设计结构图如下： ? </Layout> </DecorateContext.Provider> ); } } 数据 前面说到与列举的产品有哪些区别，区别在于PC端与移动端的数据交互 通过上面的设计结构图可以看出PC端最后会生成一份 schema 数据存储服务端，移动端从服务端获取到 schema 数据进行解析。 /> ); })}
2.1K10发布于 2021-07-12
可视化搭建移动端店铺解决方案
其实这种功能在零售系统（目前我所在公司是零售行业的领头羊）和电商系统应该很常见，很多应用场景都会用到，像产品营销页面、企业/个人微官网、H5活动页面等移动端页面，通过可视化配置快速搭建H5页面，且提供丰富的页面组件 PC端界面如下： ? PC端界面 移动端（H5和小程序）界面如下： ? ? 技术方案 PC端 React 技术栈，移动端 UniApp 跨平台框架，功能的设计结构图如下： ? </Layout> </DecorateContext.Provider> ); } } 数据 前面说到与列举的产品有哪些区别，区别在于PC端与移动端的数据交互 通过上面的设计结构图可以看出PC端最后会生成一份 schema 数据存储服务端，移动端从服务端获取到 schema 数据进行解析。 /> ); })}
vite2+vant+postcss搭建移动端
Button) app.mount('#app') <van-button type="primary">主要按钮</van-button> 安装px转rem插件 npm install postcss-px2rem-exclude lib-flexible -s 新建postcss.config.js module.exports = { plugins: { "postcss-px2rem-exclude ": { remUnit: 75, remPrecision: 2, exclude: /node_modules|folder_name
java移动端开发_移动端开发
1.移动端视口问题 视口是指浏览器的可视区域，移动端的视口到底是多宽呢？ 现在市面上的大部分手机，比如iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。 我们可以使用谷歌浏览器的移动端调试工具，来访问百度的搜索结果，可以看到网页明显被缩小了，而且页面宽度定格在980px(不信的话大家可以试试)。 < meta name=”viewport” content=”width=device-width”> 2.移动端误触解决办法 < meta name=”viewport” content=”width 3.移动端尺寸 是同一个网页在不同尺寸手机中的效果。 注意：在移动端，如果使用了背景图(比如雪碧图)，记得用同样的方式调整背景图的尺寸。 题外话：移动端看上去是不是很麻烦？视口那么小，还要引入各种东西，里面要添加的又杂又乱，还要计算数值，是不是很麻烦？
移动端图片上传旋转、压缩的解决方案
var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d canvas.height = imgWidth; ctx.rotate(Math.PI / 2) canvas.height = imgWidth; ctx.rotate(3 * Math.PI / 2)
移动端重构实战系列2——line list
”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对sandal及sheral UI的一次全方位剖析，首发在imweb和w3cplus两大站点及“前端Talk”微信公众号，其余所有标注或没有标注来源的均为转载 的名字是我自己起的（大概的意思是单行列表），要实现的东西为sheral的line list，对应的scss组件为_line-list.scss，下图为line-list的一个缩影： 这个UI应该是每个移动端网页都必备的 display: block; width: 14px; height: 8px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform:
移动端重构实战系列2——line list
这个UI应该是每个移动端网页都必备的，而且使用场景也是非常的丰富，所以这里我们采用一步步循序渐进的方式去重构。 display: block; width: 14px; height: 8px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform:
