通过以上的对比可知，ios 对于键盘的弹起和收起的用户体验是比较好的。在安卓中不会自动将输入框滚动到可见区域就给人一股很劣质的网页感觉，而且收起键盘后输入框不会自动失焦也造成了无法通过监听输入框的 blur 事件来判断键盘是否收起了，所以这也就引出了下一个问题，如何监听键盘的弹…

优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值 怎么这段代码后面加了一个chrome=1，这个Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果有的用户…

很多时候，我们在进行移动端开发时，都是先在PC端使用手机模拟器进行调试，没有问题后，我们才会在手机端的浏览器进行测试，这个时候，如果没有出现问题，皆大欢喜。但是一旦出现问题，我们就很难解决，因为缺乏可视化的界面。不似在PC端，我们能直观的去改变样式，或者是进行断点调试。有时，在…

当使用任何 CSS 的新特性的时候，浏览器的兼容问题都必须去解决。与 Flexbox 和 CSS Grid 一样，在使用 CSS 新特性布局时，兼容性比性能增强更值得考虑。 在这篇文章中，我将探索现今处理浏览器兼容问题的方法。为了让我们现在就用上 CSS 的新特性，我们可以做出…

在过去几年里，Flexbox已经成了前端最流行的布局框架，这并不奇怪，因为我们可以很方便的用它去对齐元素。 然而，前端村儿里面还有个叫Grid的小孩儿，他和Flexbox有很多功能相似的地方，有些地方他比Flexbox要好，但有也有不足。 这也会变成让开发者们纠结的地方，应该用…

设备像素(物理像素)和CSS像素(逻辑像素)设备像素设备像素指的就是设备常说的分辨率。如iPhone6分辨率为750*1334，则iPhone的屏幕横向共有750个物理像素，纵向共有1334个像素。设

移动端浏览器中的video元素是比较特别的，早期无论是在iOS还是Android的浏览器中，它都位于页面的最顶层，无法被遮盖。后来这个问题在iOS下得到了解决，但是Android的浏览器则问题依旧。X5是腾讯基于Webkit开发的渲染引擎，它提供了一种名叫「同层播放器」的特殊v…

本文是内部的一次分享沉淀，偏向基础但是涉及了一些有意思的细节，文笔有限，才疏学浅，文中若有不正之处，万望告知。 前端的一大工作内容就是去兼容页面在不同内核的浏览器，不同的设备，不同的分辨率下的行为，使页面的能正常工作在各种各样的宿主环境当中。 而本文的主题 -- 移动端开发的兼…

最近在研究关于布局的设计方案，通过学习理解阿里的fusion.design的设计思想并结合手机淘宝H5版的px布局问题。逐渐有了一些想法，这里进行综合整理，也算是抛砖引玉吧。 rem和vw都是为了解决移动端适配问题。rem方案中最成功的就是淘宝的lib-flexible了，它是…