mobile

将新的CSS技术引入到生产中

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

聊聊安卓折叠屏给交互设计和开发带来的变化

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

聊聊双11互动主玩法中前端技术亮点

在上一篇《手淘Web页面Bar和纵向适配的设计》中聊了互动项目中Bar的工业化标准设计以及对刘海设备带来的变化。我把这一点称为标准化Bar设计给适配带来的优势。今天这篇文章中主要想再花点时间聊聊今年手淘“PK赢能量”互动项目中前端有哪些技术亮点和尝鲜。当然文章涉及到的技术点估计有很多同学都有接触或者使用过。毕竟CSS仅仅是一门表现层语言。废话不多说,直接进入主题吧!

手淘Web页面Bar和纵向适配的设计

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

视窗单位在移动端上的使用技巧

视窗单位一直都存在争议,部分原因是因为移动端浏览器对如何实现视窗单位有着自己的看法,这样就让本来简单的事情变得更加复杂化。一个典型的示例是:vw的计算是否要包含浏览器的滚动条?那么网站的导航或页面控件呢?这些应该算在计算中吗?还有一些设备本身的物理属性(比如iPhone X的刘海)是不容忽视的。

移动端上的设计和适配

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

分享手淘过年项目中采用到的前端技术

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

如何在Vue项目中使用vw实现移动端适配

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

移动端H5多平台分享实践

圣诞节和元旦团队策划了两个活动,都涉及到了在多个平台下的分享,如何按照产品要求实现多平台下一致的分享效果,包括分享文案的动态生成,在没有Native的帮助下是比较困难的。我们研究了很多分享方案,得到了一套较为完整的分享方案。

iPhone X的Web设计

在新的iPhone X的Safari浏览器中为你的网站显示留有边缘。内容自动设置在显示的安全区域内,这样它就不会被圆角或设备的传感器外壳遮挡住(俗称iPhone X的刘海)。在<body><html>元素中指定与页面的background-color一样的颜色用来填充整个页面。这样页面的安全区域和其余部分混合在一起。对于许多网站来说,这已经足够了。如果你的页面只有文本和图片,那么背景色的设置看起来也非常不错。对于其他页面——特别是那些设计全宽水平导航栏的页面,比如像下图的页面,可以选择稍微深入一点,充分利用新显示的功能。iPhone X人机界面指南详细介绍了一些通用的设计原则,并且UIKit文档讨论了本地应用程序可以采用的特定机制,以确保它们看起来不错。你的网站可以利用iOS 11中引入的一些类似WebKit API来充分利用边缘的优势。

页面

返回顶部