某天，客服群里反馈，App 内嵌的某个活动页，iOS 9 的用户打开白屏，然后测试说 PC 浏览器、自用的手机都能打开，于是理所当然的将锅甩给了原生同事。但随着问题的排查，发现 “锅” 越来越朝 Web 前端方向靠拢…… Google 后说白屏是因为有 ES6 的语法在里面，我…

一. 1px边框问题 想必各位无论在面试中，还是工作中，应该遇到过1px边框的问题。不知道也没关系，现在我们就来复习一下（知道的朋友可以跳过去看第二部分了）。 1px边框，顾名思义就是前端画出1px的线，这里的1px,指的是屏幕1px大小。那么屏幕的1px和css中的1px有什…

问题描述：1px 的边框。在高清屏下，移动端的 1px 会很粗。 产生原因：首先先要了解一个概念：DPR(devicePixelRatio) 设备像素比，它是默认缩放为 100%的情况下，设备像素和 CSS 逻辑像素的比值。目前主流的屏幕 DPR=2 或者 3。CSS中设置的p…

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

一个顺手的代理工具，可以让我们随心所欲的掌控我们的开发环境，当前环境前置服务挂了还要等重启？不！直接切一个可用环境接着我的开发。验证页面不同数据状态的流程还要造数据？不！直接代理修改数据走流程，省劲。特定机型线上问题抓耳挠腮不知如何定位？代理连上查看元素、远程 log 轻松定位…

当我们给中间的框加了一个固定的高度，但是中间内容超过了框的高度。我们试图滚动中间内容的时候就会出现以下的情况: 这样就能避免产生滚动穿透，但是这种方案存在一个问题，就是当页面超过一屏幕的时候并且页面已经滚动了一部分距离，这时候当我们打开弹窗的时候，页面就滚动到了顶部，关闭弹窗的…

对于屏幕，分辨率一般表示屏幕上显示的物理像素总和。比如，我们说iPhone6屏幕分辨率是(750 x 1334px) 对于图像，概念等同于图像尺寸、图像大小、像素尺寸等等。比如，我们说(20 x 20px)的icon 在CSS规范中，长度单位可以分为绝对单位和相对单位。px是一…

在移动端H5开发中，我们常会调用一些(Android/iOS)端上的功能，这些功能有的是用H5无法实现的，有的纯粹是懒得再用H5开发一遍。JSBridge的目标即是在H5中以某种方式唤起这些端上的方法。 在解释这段代码之前，我们先来了解一些背景知识。 在Android中，有个名…

最近一个项目掉进了移动端的大坑，包括ios下fixed布局，h5唤起键盘等问题，作为一个B端程序员，弱项就是浏览器的兼容性和移动端的适配(毕竟我们可以要求使用chrome)，还好这次让我学习了一下相关知识。让我们一起来看一下我怎么挣扎出这个大坑的。 先看一下要做什么，也就是一个…