移动前端开发者必知必会:移动设备概述

  由于工作岗位的变换带来工作内容的变动,对于移动站点的前端开发已经疏远了好几个月,在这好几个月中有非常多新的东西出现,自己所掌握的一些东西也已经陈旧,所以选择了这本书《HTML5触摸界面设计与开发》来系统地学习和整理一下关于移动站点前端开发的知识体系。

  之所以选择这本书,一是由于这本书比較新,2014年04月发的第一版。其二是由于作者Stephen Woods,这是Flickr团队的资深前端,Yahoo主页的Javascript技术平台正是出自此人之手。

  接下来的时间里会陆续上传关于这本书学习的一些知识点总结和梳理的心得体会。

移动和PC的差异

  PC前端最操心的是页面是否能兼容各种浏览器→非常大一部分的工作是理解各种浏览器之间的差异,解决浏览器的兼容性问题。移动前端的问题不在各种浏览器的差异,而在于不同的设备差异。

  • 设备的尺寸不同:

    移动设备的尺寸比PC要小的多,并且没有鼠标,也没有习惯使用的键盘。

    移动设备主要有:手机和平板(小型:7寸左右的屏幕,如Nexus 7、Galaxy Note、ipad mini;大型:ipad和10寸的Android平板)。

    移动设备上的浏览器都是全屏浏览,唯一可通过旋转移动设备在横屏和竖屏之间切换的方法来调整浏览器的大小。所以,移动设备开发的网页就有了针对不同设备尺寸进行优化的需求,这就是响应式Web设计(这里不正确响应式Web设计的概念进行介绍,之前的博客有对响应式Web设计做过具体的介绍)。

  • 设备的计算能力不同:

    硬件性能是移动设备和PC设备相比最大的致命弱点,只是,最近公布的移动设备都拥有了独立的CPU,性能上比早期的移动设备要好非常多。

  • 用户的使用习惯不同:

    PC设备的使用场景比較单一化,可是移动设备确实利用了用户的时间碎片,排队、坐车、会议、甚至是上厕所。因为是时间碎片,所以移动网页的浏览对速度和性能的要求要比PC网页的要求要高的多。设想,你在上厕所,没打开一个移动网页须要10S左右的时间,我预计用户连大解都会受到影响。

  • 界面操作方式不同:

    PC通过鼠标点击和键盘输入来完毕网页的浏览。可是移动设备是通过触摸界面来完毕这些操作。

移动设备介绍

  先来了解一下不同维度下移动设备的分类:

  • 分类根据一:操作系统

    移动设备的主流操作系统有:ios、blackberry os、android、windows 8,当中android已经是眼下最流行的移动设备操作系统。

  • 分类根据二:设备尺寸

    依据设备尺寸的不同,移动设备主要有两种:手机和平板。

  • 分类根据三:浏览器

    Webkit是如今占额最高也是最流行的移动浏览器的内核。全部ios、android和blackberry的默认浏览器都是使用Webkit内核。

HTML5

  HTML5已经不是一个详细的代码名称和编程风格了,而是一个功能统称和一个规范标准。全部移动浏览器共同拥有的,为支持先进浏览器而存在的功能统称为HTML5。由于WHATWG(网页超文本技术工作小组)并没有给出官方规范的标准,正由于HTML5是一个动态的标准,所以各个浏览器对其支持性存在一定的差异,因此开发者在开发的过程中要学会注意这些差异化。

  HTML5的动态标准规范在:www.whatwg.org,完整的W3C官方规范在:w3.org。

移动页面对灵敏性的要求

  触摸的界面给人的感觉是自然、流畅,假设一个移动页面打开非常慢,操作非常卡,这给用户的感觉会非常不爽。那到底什么样子的移动网页能够给用户非常爽,非常舒服的感觉呢?

  原本我也以为从页面性能,server响应速度等多个方面来提升页面打开的速度,可是实际操作的时候这些都不会尽如人意。这本书中提出的一个观念让我眼前一亮,原来我们移动网页的性能审查标准不是单独的响应时间为參考维度的。而这本书的作者觉得:页面仅仅要让人“感觉”快,而不是真的快就能够的。所以“感觉”快,就是及时响应用户操作,让用户知道他的操作我们有反应了,而且能迅速给出反应的结果就OK了。

  

  在移动智能设备上用户基本的操作就是滑动和触摸,针对这两个操作给出用户及时的响应你的页面就是成功的。可想而知,假设一个用户的滑动在操作的过程中突然停止了,一次或许能够忍受,假设第二次、第三次反复出现,我想这个用户可能永远都不会再訪问你这个页面甚至整个站点,由于一个及时的对应造成的损失是不可估算的。

移动前端开发者必知必会:移动设备概述

时间: 2024-10-13 06:22:42

移动前端开发者必知必会:移动设备概述的相关文章

[ 学习路线 ] 2015 前端(JS)工程师必知必会 (2)

http://segmentfault.com/a/1190000002678515?utm_source=Weibo&utm_medium=shareLink&utm_campaign=socialShare 上次我写<前端工程师必知必会>已经是三年前了,那是我写过最火的文章了.三年了,我仍然会在Twitter上收到关于这篇文章的消息. 从2012年到现在,一篇文章都没发过让我觉得有点羞羞哒.三年是一段很长的时间,很多东西都发生了改变.2012年,我鼓励同学们去学习浏览器开发

2015 前端[JS]工程师必知必会

2015 前端[JS]工程师必知必会 本文摘自:http://zhuanlan.zhihu.com/FrontendMagazine/20002850 ,因为好东东西暂时没看懂,所以暂时保留下来,供以后参考! MrSunny · 12 天前 上次我写<前端工程师必知必会>已经是三年前了,那是我写过最火的文章了.三年了,我仍然会在Twitter上收到关于这篇文章的消息. 从2012年到现在,一篇文章都没发过让我觉得有点羞羞哒.三年是一段很长的时间,很多东西都发生了改变.2012年,我鼓励同学们去

移动前端开发人员必知必会:移动设备概述

因为工作岗位的变换带来工作内容的变动,对于移动网站的前端开发已经疏远了好几个月,在这好几个月中有很多新的东西出现,自己所掌握的一些东西也已经陈旧,所以选择了这本书<HTML5触摸界面设计与开发>来系统地学习和整理一下关于移动网站前端开发的知识体系. 之所以选择这本书,一是因为这本书比较新,2014年04月发的第一版.其二是因为作者Stephen Woods,这是Flickr团队的资深前端,Yahoo主页的Javascript技术平台正是出自此人之手. 接下来的时间里会陆续上传关于这本书学习的一

正则表达式必知必会小总结

<正则表达式必知必会>这本书的确非常的简练实用,准确定位了正则表达式的用途,简明的介绍了正则表达式的基本使用形式.简单易懂,容易记忆,虽然从表面上看这本书的内容比较少而且简单,但是说的内容都是非常基础的砖石,无论想建造多么高大.吊炸天的大楼,基础的砖石都是必不可少的. 看完这本书,受益颇多,在此将书中的内容再次总结,搭起自己对于正则表达式的认识框架. 正则表达式的使用对象:文本/字符串.用途对文本/字符串进行搜索.替换. 正则表达式的基本匹配单位:一个字符. 正则表达式在不同的程序设计语言中,

SSL证书必知必会:数字证书及CA基础知识

SSL证书必知必会:数字证书及CA基础知识 数字证书 数字证书是互联网通讯中标志通讯各方身份信息的一串数字,提供了一种在Internet上验证通信实体身份的方式,数字证书不是数字***,而是身份认证机构盖在数字***上的一个章或印(或者说加在数字***上的一个签名).它是由权威机构--CA机构,又称为证书授权(Certificate Authority)中心发行的,人们可以在网上用它来识别对方的身份.最简单的证书包含一个公开密钥.名称以及证书授权中心的数字签名.数字证书的一个重要的特征就是只在特

Nginx系列教程之三:nginx 必知必会

书接上回,聊一聊nginx的必知必会!!! 前言:从该教程往后,涉及到nginx的功能将越来越生产化,因此某些测试必须是基于web架构平台,所以在看本教程之前,建议先安装好LNMP或者LAMP架构,以便测试验证.其次该技术文档的测试是基于前端nginx反向代理与后端LNMP架构来测试的,后端LNMP主要是提供测试的访问页面而已,重点还是前端Nginx的设置 测试环境:前端代理:OS:CentOS6.5x64hostname:test1.lxm.comip:10.0.10.11 后端LNMP:OS

MySQL必知必会 pdf完整版

需要学习的朋友可以通过网盘下载: http://tadown.com/fs/8yi6be9nsehu9e921/内容简介  · · · · · · <MySQL必知必会>MySQL是世界上最受欢迎的数据库管理系统之一.书中从介绍简单的数据检索开始,逐步深入一些复杂的内容,包括联结的使用.子查询.正则表达式和基于全文本的搜索.存储过程.游标.触发器.表约束,等等.通过重点突出的章节,条理清晰.系统而扼要地讲述了读者应该掌握的知识,使他们不经意间立刻功力大增. 读者评论: 飞林沙  2013-11

迈向高阶:优秀Android程序员必知必会的网络基础

1.前言 网络通信一直是Android项目里比较重要的一个模块,Android开源项目上出现过很多优秀的网络框架,从一开始只是一些对HttpClient和HttpUrlConnection简易封装使用的工具类,到后来Google开源的比较完善丰富的Volley,再到如今比较流行的Okhttp.Retrofit. 要想理解他们之间存在的异同(或者具体点说,要想更深入地掌握Android开发中的网络通信技术),必须对网络基础知识.Android网络框架的基本原理等做到心中有数.信手拈来,关键时刻才能

一个老师程序员说:这是学Java 必知必会的 20 种常用类库和 API

一个有经验的Java开发人员特征之一就是善于使用已有的轮子来造车.<Effective Java>的作者Joshua Bloch曾经说过:"建议使用现有的API来开发,而不是重复造轮子".在本文中,我将分享一些Java开发人员应该熟悉的最有用的和必要的库和API.顺便说一句,这里不包括框架,如Spring和Hibernate因为他们非常有名,都有特定的功能.最后,如果大家如果在自学遇到困难,想找一个java的学习环境,可以加入我们的java学习圈,点击我加入吧,会节约很多时