最近一段时间在做 H5 聊天项目，踩过其中一大坑：输入框获取焦点，软键盘弹起，要求输入框吸附（或顶）在输入法框上。需求很明确，看似很简单，其实不然。从实验过一些机型上看，发现主要存在以下问题： 在 Android 和 IOS 上，获知软键盘弹起和收起状态存在差异，且页面 web…

移动端web项目越来越多，设计师对于UI的要求也越来越高，比如1px 的边框。在高清屏下，移动端的1px 会很粗。 比如，这个是假的1像素 那么为什么会产生这个问题呢？主要是跟一个东西有关，DPR(devicePixelRatio) 设备像素比，它是默认缩放为100%的情况下，…

🚀 由于现在手机都是"高密度屏幕", 我们写的1px到了手机上会用2/3个物理像素点去显示, 这样1px边框看起来就会比较粗, 所以如果你也觉得自己的1px边框比较粗, 那么请往下看. 其实如果你百度"1px边框"会有很多文章, 大部分都会说有7种方法, 不过其实经过我的测试…

iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。 大家都知…

百分比在PC端自适应上也经常用到，着实相当好用，但它一般用于宽度自适应的设置，高度设置百分比时，要求其父类元素有明确高度。 为了让元素设置height：100%生效，并且正好为窗口高度，则需要给html和body元素以及它所有的父元素都设置高度100%。 Margins 和 p…

本文详细讲述了如何使用 JSBridge 在 H5 和原生 Android、IOS之间进行交互。IOS 端包含 OC 和 Swift 的版本，Android 端包含 Java 和 Kotlin 版本。 本文主要是通过代码讲述了如何使用 JSBridge 在 H5 和 原生之间进…

最近秋招之余空出时间来按自己的兴趣动手做了一个项目，一个基于vue，typescript，pwa的实验浏览移动端webapp，现在趁热打铁，将这个项目从开发到部署整个过程记录下来，并将从这个项目中学习到的东西分享出来，如果大家有什么意见或补充也可以在评论区提出。先介绍一下这个项…

本文可能有点啰嗦了... 为了充分发挥vue的特性，我们不应该通过ref来直接操作dom，而是应该通过修改数据项从而让vue自动更新dom。因此，我们这样编写template。 当然.ys-float-btn肯定是position:fixed的，其他的样式很简单，大家自由发挥。…