先上一个例子，在div.main中存在2个子元素.left、.right，正常的情况下是左侧的元素left撑满了整个main，但是在点击left后，right的宽度会变成200px出现在右侧。 初始的情况下，屏幕上显示一个全屏宽，高500px的绿色，在正常pc的浏览器中，由于没…

之所以写这个总结，还要从上周的一次移动端项目的 debug 说起。那天，测试小姐姐拿着自己的 iphone6s 过来找我，说页面打不开。我想：这怎么可能，我手机里挺好的呀，Chrome调试工具也没报错呀！就把她手机拿过来看了看，发现一进去还真就是一片空白。WTF（手动黑人问号）…

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

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

一、HTML方法检测在html中分别引用横屏和竖屏样式二、CSS方法检测css中通过媒体查询方法来判断是横屏还是竖屏三、JS方法检测【1】orientationChange事件苹果公司为移动Safar

我有刘海你有吗？`iphoneX`首先提出刘海屏概念的时候，打了所有软件一个措手不及，所以起初，我们如何适配`iphoneX`就是个很头疼的问题了。接下来看看如何适配刘海。

关于 JSBridge，绝大多数同学最早遇到的是微信的 WeiXinJSBridge（现在被封装成 JSSDK），各种 Web 页面可以通过 Bridge 调用微信提供的一些原生功能，为用户提供相关的功能。其实，JSBridge 很早就出现在软件开发中，在一些桌面软件中很早就运…

面试的时候小伙伴们有没有被问到过Hybrid App呢？不得不说了解Hybrid App是我们前端面试中的一个加分项。今天就跟随笔者的步伐让你彻底弄懂Hybrid App，让你就算没做过也能对面

前言 在 Hybrid 开发的过程中，由于前端和客户端同学存在认知差异，导致在解决一些 bridge 问题时存在一定的沟通成本和信息不对称。本文从前端视角切入，讲述 bridge 方法如何和客户端进行