Cindy Krum 最近发表了一篇非常值得一读的文章：《9 Things You Need to Know About Google's Mobile-Friendly Update》，强烈建议在阅读本文前理解一下该文的思想。已经准备好了？那我们开始吧。为了在 4 月 21 号前迅速优化为移动端网站，最简单的方法就是牺牲一些性能。但是谷歌曾经多次提醒我们，站点的响应性能是非常重要的搜索权重点，比如 2010关于桌面端 和 2013 关于移动端 的这两篇文章。在本文中，我将会讲述一下最佳实践方案，希望你在创建或重构设计时牢记这些经验。此外，建议你精读谷歌关于移动友好型站点的指导文档。
南北 曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理各终端的适配而乱了手脚。对于混迹各社区的偶，时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配？那么趁此**Amfe阿里无线前端团队双11技术连载**之际，用一个实战案例来告诉大家，手淘的H5页面是如何实现多终端适配的，希望这篇文章对大家在Mobile的世界中能过得更轻松。
大漠 手淘用户这几天应该看到了年货节版本，不知道刚打开首页有没有被一阵锣鼓声、鞭炮声给吓倒。为了营造一种过年的气氛出来。PD们给年货节上了一个舞龙的揭幕动画，而这个任务就落在了小生的头上，为了将.gif动效在移动端上实现，着实费劲。那么今天就来介绍这个动画效果是如何实现的？
大漠 移动端业务开发，iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下，会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。
大漠 在互联网上有关于1px边框的解决方案已经有很多种了，自从使用Flexible库之后，再也没有纠结有关于1px相关的问题。由于最近在考虑新的移动端适配方案，也就是放弃Flexible库，我不得不考虑重新处理1px的方案。为此为我自己也重撸了一些1px的解决方案，整理出来，希望对有需要的同学有帮助。
大漠 前端圈真乱，这话一点不假。但乱也乱的好处，乱则生变，有变化才有进步。今天还是老调重谈，聊聊移动端页面的适配。因为对于一枚前端而言，天天和页面打交道（H5页面），那么布局的活总是少不了，这也将面临不同终端的适配问题。不知道你是否和我一样，页面布局总是或多或少会有一些蛋疼的事情发生。如果是的话，建议你花点时间阅读完下面我扯蛋的东东。
大漠 苹果公司（Apple）的发布会也开完了，新产品也将登陆了。估计很多开发人员看到iPhone X的设备是要崩溃了，特别对于前端开发人员更是如此。iPhone X的屏幕覆盖了整个手机的屏幕，为相机和其他各部件留出了一个空间。结果是屏幕设计出现了一些尴尬的情况。比如将网站限制在一个**“安全区域”**。而在屏幕上的安全区域中，造成网站左边或右边有空白区域。很多像我这样的前端开始在考虑，这个蛋疼的东西怎么处理。而且项目中肯定要考虑这个设备的处理方式。值得庆幸的是，有两个小技巧或许可以帮助我们。
大漠 在新的iPhone X的Safari浏览器中为你的网站显示留有边缘。内容自动设置在显示的安全区域内，这样它就不会被圆角或设备的传感器外壳遮挡住（俗称iPhone X的刘海）。在<body>或<html>元素中指定与页面的background-color一样的颜色用来填充整个页面。这样页面的安全区域和其余部分混合在一起。对于许多网站来说，这已经足够了。如果你的页面只有文本和图片，那么背景色的设置看起来也非常不错。对于其他页面——特别是那些设计全宽水平导航栏的页面，比如像下图的页面，可以选择稍微深入一点，充分利用新显示的功能。iPhone X人机界面指南详细介绍了一些通用的设计原则，并且UIKit文档讨论了本地应用程序可以采用的特定机制，以确保它们看起来不错。你的网站可以利用iOS 11中引入的一些类似WebKit API来充分利用边缘的优势。
大漠 圣诞节和元旦团队策划了两个活动，都涉及到了在多个平台下的分享，如何按照产品要求实现多平台下一致的分享效果，包括分享文案的动态生成，在没有Native的帮助下是比较困难的。我们研究了很多分享方案，得到了一套较为完整的分享方案。
大漠 有关于移动端的适配布局一直以来都是众说纷纭，对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案，随着viewport单位越来越受到众多浏览器的支持，因此在《再聊移动端页面的适配》一文中提出了vw来做移动端的适配问题。到目前为止不管是哪一种方案，都还存在一定的缺陷。言外之意，还没有哪一个方案是完美的。事实上真的不完美？其实不然。最近为了新项目中能更完美的使用vw来做移动端的适配。探讨出一种能解决不兼容viewport单位的方案。今天整理一下，与大家一起分享。如果方案中存在一定的缺陷，欢迎大家一起拍正。
大漠