当我还沉浸在UI样式改版后的喜悦中时，QA同学拿着他的华为Mate X5（折叠屏手机）来找我："这个字体在展开状态下太大了，影响用户体验"。这才意识到我们的H5页面一直没有在折叠屏设备上进行过充分测试

在移动端项目，我们常遇到的一个问题：用户点击输入框时，页面会不期望地发生自动缩放，这既打断了用户的输入流程，也影响了整体的用户体验。 我们的目标是优化这一行为，确保用户在点击输入框时，页面能够保

本文记录了我在滴滴从事H5开发工作，到目前为止的这一年里，我所遇到的一些比较经典的问题，主要是样式上的，希望能帮助到大家！

开发一个H5的通用架子，让前端同学开箱即用，迅速投入战斗。 按照Vant官网推荐自动按需引入组件，同样，Vant官网中也有对Rem适配的推荐配置，按照官网说明的使用。需要注意的是postcss的配置中，autoprefixer下的browsers需要替换成overrideBro…

由于手机屏幕尺寸不一样，分辨率不一样，或者需要考虑横竖屏的问题，或者考虑到移动端兼容性。这时候你也就不得不解决在不同手机上，不同情况下的展示效果，所以就需要一个开箱即用并且行之有效的移的移动端适配方案

在前端开发之前，设计师都会为前端开发者提供视觉稿/设计稿。 一. 分辨率 ..... PPI: Pixels Per Inch(像素每英寸),该值越高，则屏幕越细腻。 PPI数值越高，代表显示屏能够以越高的密度显示图像，画面的细节就会越丰富。 DPI: Dots Per Inc…

作为一个开发了多个 H5 项目的前端工程师，在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下，并在后面给出坑产生的原理，和现阶段常规的填坑方案。由此来做一个阶段性的总结。 之前两篇文章已经详细的论述了1px 问题与 响应式布局问题，并给出了原理和解决…

不知不觉在网易已有三年半，占了一半时间都在与移动端打交道，整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在，不是说它多难而是说它坑位实在太多了，怎样填都填不完。Android和iOS各显神通，Android的系统版本和屏幕分辨率多得难以一招兼容，iOS的顽固标准…

2. 1px边框的问题 2. background-image 和border-image类似，准备一张符合条件的边框背景图，模拟在背景上。 上面两种都需要单独准备图片，而且圆角不是很好处理，但是可以应对大部分场景。 这种方式可以满足各种场景，如果需要满足圆角，只需要给伪类也加…