《HTML5和JavaScript Web应用开发》——第 2 章 移动Web 2.1移动优先

简介: 移动Web指的是为移动设备(例如可以实现无线连接的智能手机或者平板电脑)创建的、基于浏览器的应用。从2008年起,Web的重心转向移动浏览器,为当今的Web开发人员和用户提供更好的生活质量。但是,当你开始在大量的设备和浏览器上测试新的移动Web应用时,你可能会困惑于应该支持什么平台,应该使用哪些HTML5特性来构建应用。

本节书摘来自异步社区《HTML5和JavaScript Web应用开发》一书中的第2章,第2.1节,作者:【美】Wesley Hales著,更多章节内容可以访问云栖社区“异步社区”公众号查看

第 2 章 移动Web

2013年,消费者将会购买10亿部具有HTML5功能的移动设备。今天,半数的美国成年人拥有智能手机,也就是1.5亿人,其中28%的人将移动设备作为访问Web的主要手段。支持HTML5应用程序的浪潮正在涌来,开发人员正将重点转向移动开发。

即使在大型企业环境中,移动浏览器的统计数字也在上升,但我们仍然要面对这个事实—1/3的互联网用户仍然使用Internet Explorer 9以前的版本访问互联网。事实上,在某些情况下,这些早期的Internet Explorer用户占据网站访问者的2/3。随着时间的推移,桌面用户将会升级到较新的浏览器版本和更好的浏览器,但是在我们推进Web,建立在所有浏览器上都能引人入胜的应用时,还必须创建一个稳固的架构,努力为用户提供最好的体验。

对于我们的Web项目和产品,Web浏览器的功能意味着一切。不管是为了兴趣、利益还是人类的整体进步,理解应该怎样为桌面和移动用户提供设备都很重要。本章的目标是找出所有浏览器的共同基础,了解构建今天的Web应用所需的部件。

移动Web指的是为移动设备(例如可以实现无线连接的智能手机或者平板电脑)创建的、基于浏览器的应用。从2008年起,Web的重心转向移动浏览器,为当今的Web开发人员和用户提供更好的生活质量。但是,当你开始在大量的设备和浏览器上测试新的移动Web应用时,你可能会困惑于应该支持什么平台,应该使用哪些HTML5特性来构建应用。

不管你是热爱HTML5、W3C标准的Open Web专家,还是刚刚接触HTML1的新用户,本章将为你介绍最新的代码、趋势和市场调查,帮助你为下一个Web项目做出正确的决策。还在等什么?好好学习吧!

2.1 移动优先

首先,我们要抓住重点。将移动设计和开发放在桌面之上曾经被认为是荒唐可笑的,而几年前,“移动优先”思路的提出给Web开发人员带来了新鲜空气,让大家领略了移动设备上基于HTML5 API进行的硬件访问。

除去最明显的因素外,考虑移动优先还有几个理由:

  • 为受限制的设备和分辨率开发网站,可以创建流动性更强、更灵活的内容。
  • 设备特性(例如加速计和地理位置硬件)利用“增强现实”等技术提供了新的商机。
  • 整体上,移动优先要求我们考虑代码质量。今天,开发人员在使用CSS进行硬件加速动画时必须考虑电池寿命,这种开发质量不仅能带来更好的性能,还能鼓励你关注更清晰的语义。
  • 随着你放弃以桌面为中心的Web开发,移动浏览器让你看到未来,你能够站在时代前沿,接触新的规范和特性。

令人遗憾的是,移动Web还不能做到编写一次,到处运行。在规范最终定稿、特性都被实现的时候,互操作性的目标就可以达到。但是,在今天的移动浏览器中,我们还无法得到大体上一致的浏览器。尽管新的平板电脑和手机不断发行,它们试图达到与HTML5一致的水平,但在一段时间内,它们还必须支持旧的“分裂”设备。所以,毋庸讳言,iPhone 3G和没有升级到Android 4的任何设备都是移动时代的IE6。

相关文章
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
29天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
123 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
79 33
|
2月前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
100 2
|
3月前
|
JavaScript
使用Node.js创建一个简单的Web服务器
使用Node.js创建一个简单的Web服务器
|
3月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
59 5
|
3月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
68 6
|
3月前
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合;TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展,特别是在Vue 3.0中完全采用TypeScript编写,预示着未来的Web开发将更加高效、可靠。
100 4
|
3月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
66 2

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    47
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    57