mobile

Ratchet教程:meta与link标签

通过《Ratchet教程:安装》一文,大家对Ratchet有了一个初步的了解。那么从这一节开始,我们一起来开始实战。通过实战来更好的学习和了解Ratchet,更希望学习了Ratchet之后,大家在制作移动页面的时候可以高呼“so easy!”在这一节中以Rathect框架模板文件头部为主导,重新罗列了和标签在移动开发中的作用与功能。详细介绍了模板中所用到的标签功能。同时搜集了部分网上有关于这方面的介绍。希望这些标签功能对大家今后的开发有所帮助。

Ratchet教程——安装

Ratchet是一款使用HTML、CSS和JavaScript用来制作移动网页或App的前端框架。目前最新版本是Ratchet v2.02。从今天开始我们一起来看如何使用Ratchet框架以及现成的组件制作移动网页或者app。首先向大家介绍Ratchet的环境配置与及安装。并向大家展示了使用Ratchet制作的一个简单的移动页面效果。

响应式设计、移动端网站与原生应用的优点和缺点

移动端的优化最近成了一个时髦的话题,将来也会有更多关于这方面的讨论。根据Mashable在2013年8月份发布的统计,可以得知,全球所有网站流量的17.4%都是通过移动设备来的,而这个数字在2014年将会继续增长。所以,你如果不想失去一杯羹的话,是时候步入移动端的领域了。

提升移动设计用户体验的9种方法

以下内容来自Ben Terrill的一篇投稿文章。在Mobify工作的Ben带领着他的团队帮助他们那些就像Starbucks, Bose 和 Threadless的重要客户在移动和平板方面上打造出了卓越的完美体验。Ben参与编写了一篇名为50 Ways to Please Your Customers的电子书籍,而该书提供了移动web设计的最佳实践方法。来自Mobify的Julie Szabo通过信件帮助我对这本书进行了一些改善,虽然我很少这么做,但我还是觉得很有必要向大家说明一下:Julie Szabo的这封信完全是无偿的帮助,而且这本免费提供给大家的书也是非常优秀的。

本文由LL根据的《Nine Ways to Improve User Experience in Mobile Design》所译,从九个方面向大家介绍了如何提升移动端设计给用户带来最好的体验。

iPads和iPhones的Media Queries

CSS3 Media Queries是一个强大的媒体查询功能,他的出现使用我们的站点可以随着不同的设备展现出不同的样多风格。紧随着Responsive设计的出现,Media Queries的功能是越来越得到前端人员的亲眯。

我也不另外,跟着这股时尚流行风,从接触到学习,紧接的到应用,对这个属性有了基本上的了解和实战经验。为了大家方便使用Media Queries,W3cplus通过互联网的搜集整理了一份CSS3 Media Queries模板。随着移动端上的应用越来越多,特别是苹果公司的系列产品型号的增加,给前端人员对Media Queries的运用带些许的麻烦。为了解决这个麻烦,在互联网上搜集了相关的资料,专门针对苹果的iPads和iPhones的Media Queries模板,希望这些模板能帮助大家减少在网上查找的时间。

image-set实现Retina屏幕下图片显示

最近一直在学习Retina屏幕下图片的处理方法,从《走向视网膜(Retina)的Web时代》一文中知道了Retina这个新名词,同时知道了他是什么东东,同时也继续在探讨Retina方面的知识点,随后在《移动Web——CSS为Retian屏幕替换图片》和《使用css sprites来优化你的网站在Retina屏幕下显示》中学习了Retina屏幕下图片的设置方法,或者说技巧吧,接下来《Web设计师如何制作Retina图像》学习了Retina屏幕下的图片制作技巧。其实可以说,这几篇文章可以让我知道如何在Retina屏幕下处理图片的技巧和细节了。因为这几篇文章从概念到制作Retina屏蔽下的图片,以及Coding实现,可以说是一条龙了。这些都是自以为事,为什么呢?除了这些方法,其实还有更先进的方法,这也就是我接下来要说的事情了。

移动Web——CSS为Retina屏幕替换图片

移动端的Web开发是一个热门的话题,由于移动端的普及,以后互联网上她将是会是主流,取代PC端的霸主之位。做为前端开发人员,很有必要的去了解并掌握移动Web的开发与制作。今天这篇教程主要是介绍Retina设备下的图片处理技术,正如《走向视网膜(Retina)的Web时代》一文所言,普通图片在Retina设备下显示将会变得模糊(图片在Retina设备下像素放大了两倍),所以为了能让用户在Retina设备(如iPhone 5, New iPad,Galaxy Nexus等设备)浏览的图片能清晰,满足用户的体验,Web前端人员需要学习并掌握如何处理这些问题,这对于Web前端人员来说是一个新的课题,也是一个新的挑战。今天跟着的《The Mobile Web: CSS Image Replacement for Retina Display Devices》一文学习了几种在移动端的Retina屏幕下处理图片的方法,觉得蛮好的,特意花了一个晚上时间将其转译为中文,希望对有着同样爱好与兴趣的同学有所帮助,如果有译的不对之处,烦请指正,或者大家可以阅读原文,你会有更深的体会(因为本人的EN是三脚毛功夫,莫怪(^_^))。

CSS3 Media Queries在iPhone4和iPad上的运用

CSS3 Media Queries的介绍在本站上的介绍已有好几篇文章了,但自己碰到的问题与解决的文章还是相对的较少。前几天在《修复iPhone上submit按钮bug》上介绍了修复form中sumit按钮的bug。同一个项目,为了实现iPhone和iPad横板与竖板的风格,让我还是头疼了一翻。

一开始按照CSS3 Media Queries模板中的介绍来运用,虽然帮我解决了iPad的横板与竖板的风格渲染问题,但在iPhone4上还是存在问题的。后来结过网上的查找,总算是问题解决了,下面就来看看问题是如何解决的。

在具体开始之前,先来看看他的源码:

手机上网站导航的制作

为了让Web页面在手机上显示流畅,现在国外很多网站都使用Responsive设计和CSS3 Media Queries的结合来实现。这样的实例到处可见,那么今天我想和大家一起学习的是有关于这种方法实现手机布局中的导航制作。

如果你的导航选项比较多,放到手机上来浏览就会挤到一起,造成美观性的不足。下面为了解决这样的问题,我们就一起跟随Nick La写的教程《Mobile Navigation Design & Tutorial》学习如何使用jQuery来解决刚才所说的问题。

修复iPhone上submit按钮bug

自从完成上次iPhone的几个页面效果后,一直在没有制作iPhone的页面效果了,今天在公司写了一个登录页面效果,让我碰到一个怪异的问题——“表单中的input[type="submit"]和input[type="reset"]按钮在iPhone的safari浏览器下圆角有一个bug”。下面我来简单的描述一下这个bug的样子:

初载入页面后,表单中的input[type="submit"]和input[type="reset"]按钮渲染成下图的样子:

奇怪的是你点击以后就会正常:

对比一下,你也会觉得怪,怪都算了,还不知道如何下手:

页面

返回顶部