苹果公司（Apple）的发布会也开完了，新产品也将登陆了。估计很多开发人员看到iPhone X的设备是要崩溃了，特别对于前端开发人员更是如此。iPhone X的屏幕覆盖了整个手机的屏幕，为相机和其他各部件留出了一个空间。结果是屏幕设计出现了一些尴尬的情况。比如将网站限制在一个**“安全区域”**。而在屏幕上的安全区域中，造成网站左边或右边有空白区域。很多像我这样的前端开始在考虑，这个蛋疼的东西怎么处理。而且项目中肯定要考虑这个设备的处理方式。值得庆幸的是，有两个小技巧或许可以帮助我们。

有关于移动端的适配布局一直以来都是众说纷纭，对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案，随着viewport单位越来越受到众多浏览器的支持，因此在《再聊移动端页面的适配》一文中提出了vw来做移动端的适配问题。到目前为止不管是哪一种方案，都还存在一定的缺陷。言外之意，还没有哪一个方案是完美的。事实上真的不完美？其实不然。最近为了新项目中能更完美的使用vw来做移动端的适配。探讨出一种能解决不兼容viewport单位的方案。今天整理一下，与大家一起分享。如果方案中存在一定的缺陷，欢迎大家一起拍正。

当你陪着家人嗑着瓜子，和家人一起看着春晚，顺便拿着手淘参与春晚抽奖互动的时候，杭州还有两百多程序员还奋战在一线当中。现在年也过完了，奖也抽了，红包也拿了。也该好好回来工作的时候了。这次很荣幸，自己能参与手淘过年项目（红包开光和春晚互动项目）的项目中，虽然仅仅参与其中的部分工作，但事后感觉有些东西还是应该总结总结的，为之后的项目做准备。那么简单的来总结一下，我自己在参与项目中用到的一些前端技术。

面对于不同移动设备，特别是针对于屏幕高度的设计和适配，一直是困扰着视觉和前端。特别是设计师和前端开发人员之间的协调，沟通的成本也随着增加。那么这篇文档，主要是用于移动端设计和适配（针对屏幕高度方面），希望通过文档的形式能减少设计师和开发人员之间的一些沟通成本，同时让前端开发人员用最低的时间成本来完成终端设备的UI适配工作。

记得在去年双11的互动页面中，我们折腾了一波iPhone8、iPhone8 plus和iPhone X的适配，特别是iPhone X刘海区域的适配。针对这方面的页面适配，沉淀出相应的适配方案。而今年的双11期间，苹果又推出了iPhone XS、iPhone XR和iPhone XR Max以及众多的安卓刘海设备。言外之意，前端在这方面的适配变得越来越复杂。面对众多场景，我们应该怎么去面对呢？接下来聊聊我在今年双11的主互动玩法中是怎么处理的。

很多年前，前端同学都觉得PC端的适配（兼容处理）难，都认为移动端的时代适配会容易得多，也无需考虑那么多的事情。事实并非如此，移动端的时代同样面临着各种适配的处理。特别是刘海机的出现，前端需要考虑刘海机适配。而如今随着三星Galaxy Fold和华为Mate X折叠屏手机的面世，前端同学接着又要处理折叠屏幕的适配。就我们团队而言，在上个月就接到相关的通知，需要处理折叠屏的适配。碍于真机难得，前段时间就通过模拟机，做了一些简单的适配测试，不过幸运的是，今天拿到了真机（三星Galaxy Fold) ，写了一个简单的Demo，做了一些适配的测试。特此将相关心得和大家一起共享，希望对大家有所帮助。

时间如梭，又一年双11圆满收官了。作为技术宅男除了买买买之外还能和大家聊的就是前端技术了。"淘宝盖楼"上热搜了，我想你应该也参加了双十一淘宝盖楼吧，是不是觉得特别的酸爽。今年有幸参与盖楼的互动活动的开发中备感荣幸，因为我们的努力让全民都爽了。在开始之前要先感谢一下曾经努力的自己！楼盖完了，我们回过头来聊聊这次多人互动PK在开发的时候用了哪些有意思的前端技术。感兴趣的同学，请继续往下阅读。

可折叠Web的说法是可折叠设备带来的。可折叠设备形式多样，从笔记本电脑到手机，再到新奇的双屏幕混合设备。对于这类新发明并没有一个全面的定义，但大多数都可以归为两类。“可折叠”是指屏幕可以折叠的设备（比如华为Mate X，三星Galaxy Z Flip）；而“双屏”设备的屏幕是分开的，但也可以以独特的方式一起工作，以灵活的形式提供生产力（比如，微软的Surface Neo和Surface Duo）。当涉及到Web设计时，这两种类型可能会遵循类似的规则。如果这项技术能大获成功，那么Web设计将面临十年来最大的变革。这对于我们Web开发者而言，也将会开启新的旅程。

早在去年五月份就在《聊聊安卓折叠屏给交互设计和开发带来的变化》一文中和大家初次聊了安卓折叠屏给交互设计和开发将会带来的变化。随着一年多来的变化，在Web开发中也有相应的API专门服务于双屏幕和折叠屏幕，有关于这方面的介绍，前段时间在《可折叠Web可能会给我们带来的变化》一文中和大家有过初步的介绍。虽然这两篇文章从不同的时间段，不同的角度阐述了折叠屏中的开发模式，但我想很多同学还是会因此感到困惑，甚至不知道如何为多屏幕或折叠屏幕这样的设备做相应的Web开发。那么今天，在这篇文章中抛开概念，只聊一些Web API，即 可用于双屏幕和折叠屏的Web API。如果你感兴趣的话，请继续往下阅读。

告诉大家一个好消息，The Screen Fold API 已经进入 W3C规范的ED阶段 了。这个规范主要可以帮助我们以后为使用折叠屏设备用户提供一个更好的用户体验，即 为折叠屏设备在不同的折叠状态（“姿势”）提供相应的布局。这个规范主要由 三星（Samsung） 的 @Diego González 和 英特尔（Intel Corporation） 的 @Kenneth Rohde Christiansen 一起起草的，虽然目前只是处于规范的 ED 阶段，但这为我们今后在折叠屏设备上实现Web布局有了一定的理论依据。也许在未来，这里面的一些属性或API还会有所变动，但这并不影响我们去探究或参与讨论。或许说不定明年，或者后年你就在实际业务中需要面对折叠屏幕的适配需求。如果你感兴趣的话请继续往下阅读。