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

在这篇文章中，我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图，它将根据屏幕的宽度来改变列的数量。最精彩的地方在于：所有的响应特性被添加到了一行 css 代码中。这意味着我们不必将 HTML 与丑陋的类名(如col-sm-4, col-md-8)混杂在一起，也不必…

4.页面中的滑动刷新在某些手机中出现卡顿滑不动的情况,以下给出可行的解决方案: a.关闭probeType属性(传说是因为这个启用监听滚动状态的很耗性能,关闭这个属性滑动就会流畅很多) b.给scroll元素增加css样式:-webkit-transform:translate…

网络上会有很多的解释，这些解释都是对的。 通俗点说，出现这种区别是因为，屏幕尺寸没有屏幕分辨率增长的快（所以更高清了）。所以，对于iPhone6来说，1pt（代码中的尺寸值单位，也可理解为屏幕物理尺寸的换算单位）代表2px。对于iPhone6P来说，1pt代表3px。 所以对于…

在移动端开发的时候经常会碰到区域滚动的需求，当然实现起来也是非常简单的，给需要滚动的元素定高然后添加一个overflow-y:scorll自然就可以滚动了，但是添加这个属性之后，使用chrome或者其他浏览器工具调试时是支正常的，但是到手机上时滚动效果就十分的奇怪，滚动会让人感…

现在越来越多的app采用混合模式开发（Hybrid App），既有原生app的优良用户体验，又有web app的跨平台优点。 而其核心是使用 WebView 控件实现加载url，接下来我总结了关于 WebView 的介绍和使用。 看过一些从app开发者的角度写的关于 Hybri…

... 上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、PPI、DPI、DP、DIP、DPR、视口等等，你真的能分清这些概念的意义吗？ 本文将从移动端适配的基础…

2018年最后的法定假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章 使用Flexible实现手淘H5页面的终端适配和再聊移动端页面的适配)…

在安卓中，直接使用原生 video 会导致全屏播放，盖住所有元素，因此使用 x5 播放器。但是 x5 播放器还是存在问题，虽然不会盖住元素，但是会自己添加特效（盖一层导航栏蒙层）。 这样可以在安卓下使用 x5 播放器， playsInline 及 webkit-playsinl…