mobile

【转载】Web移动端Fixed布局的解决方案

移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。

手淘年货节舞龙揭幕动画实战

手淘用户这几天应该看到了年货节版本,不知道刚打开首页有没有被一阵锣鼓声、鞭炮声给吓倒。为了营造一种过年的气氛出来。PD们给年货节上了一个舞龙的揭幕动画,而这个任务就落在了小生的头上,为了将.gif动效在移动端上实现,着实费劲。那么今天就来介绍这个动画效果是如何实现的?

使用Flexible实现手淘H5页面的终端适配

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配?那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松。

一个先进的App框架:使用Ionic创建一个简单的APP

自Hybrid Mobile技术发展以来,Web开发者转到移动开发的人数大大增加了。Hybrid Mobile开发技术使得一个Web开发者能够去开发一个运行在多个平台上的移动应用。完全不用去学习相应的平台语言和使用已经存在的技术。Hybrid Mobile技术已经发展了很多,有很多不同类型的平台存在,比如说PhoneGapTitanium。一个值得考虑的Hybrid Mobile开发新平台就是Ionic

如何让你的移动端网站更快

Cindy Krum 最近发表了一篇非常值得一读的文章:《9 Things You Need to Know About Google's Mobile-Friendly Update》,强烈建议在阅读本文前理解一下该文的思想。已经准备好了?那我们开始吧。为了在 4 月 21 号前迅速优化为移动端网站,最简单的方法就是牺牲一些性能。但是谷歌曾经多次提醒我们,站点的响应性能是非常重要的搜索权重点,比如 2010关于桌面端2013 关于移动端 的这两篇文章。在本文中,我将会讲述一下最佳实践方案,希望你在创建或重构设计时牢记这些经验。此外,建议你精读谷歌关于移动友好型站点的指导文档

使用 Varnish 优化移动端站点

想象一下,你刚刚发布了一篇博文,并分享到了社交网络。然后,这篇文章恰巧被大V看中再次分享了出去,立即吸引了数百粉丝的目光,引导他们涌入了你的网站。看到这么多的访客量,以及它们的评论,你内心激动不已。突然之间,你的网站就挂掉了,满屏的数据连接错误……或者假想另一种情境,你一直很努力地创业。突然有一天,一个大V在社交网络表达了对贵公司的喜爱之情,字里行间满满的赞叹。关注这个大V的粉丝心动了,又涌入了你的网站。不幸的是,点击连接后却无法进入你的网站,或者进入后无法注册用户,甚至页面相应超时,无法获取产品的序列号。尽管你在社交网络上对此非常诚恳的表达了歉意,但众多的浏览者都不会再有兴趣。

指尖的流畅体验

为了建立完整的体验,我们将 Flipboard 带到 web 端。我们在 Flipboard 所做的,在每台用户使用的设备上都拥有独立的价值:整理那些来自你最关心的主题,来源以及人的最好的故事。因此把我们的服务带到web端,也是一个合乎逻辑的延伸。当我们开始这个项目后,认识到我们需要把源自移动体验的思考搬到 web 端,试图提升 web 端的内容布局和交互。我们想达到原生应用般的精致和性能,且仍能感知到真实的浏览器。

移动端重构系列13——页面切换

在前面几篇教程当中,说到切入切出的动画,一般用在panel、popup、modal等组件上的效果。但在移动端上常常会要处理页面之间的切换效果。简单的理解,类似PC端上Web页面中的Slidershow效果,也就是大家说的图片轮播效果。只不过这种效果在移动端上略做处理。接下的主要向大家介绍这方面的实现方法。

移动端重构系列12——popup

上一节介绍了移动端中Modal的制作,那么在实际开发当中,除了有Modal这样的弹出窗之外还有另一种弹出效果。这种效果常常被称为“Popup”。俗称“气泡”。那么在这一节中将向大家介绍移动端中的Popup实现方法。

移动端重构系列11——弹窗modal

弹出窗是页面与用户沟通的一种有效方式,我们常把这种效果称为Modal效果。在移动端这样的弹窗效果也是常见的效果之一。如果你将功能划分成每个组件,那么Modal将是你这些组件中的核心组件之一,因为任何网站都有可能离不开这样的弹窗效果。那么我们今天就一起来学习如何在移动端实现Modal的效果。

页面

返回顶部