有人说每个程序员都曾经有过改变世界的梦想，笔者认为，这与程序员年轻时编写的第一个程序有着莫大的关系。简简单单的一句“hello world”让年轻的心开始相信梦想，用一种低调的壮志凌云向世界展示自己的存在。那么，今天就让我们从一句简单的“hello world”开始造梦之旅吧。

【范例4-1  简单的页面hello world】

     <!DOCTYPE>
     <htmlxmlns="http://www.w3.org/1999/xhtml">
     <head>
       <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
       <meta name=”viewport” content=”width=device-width,initial-scale=”>                //本节的重点所在
       <title>hello world </title>                                                            //title属性在应用中是不显示的
       <link rel="stylesheet"href="jquery.mobile-1.0.min.css" />                       //jQuery Mobile样式文件
       <script src="jquery-1.7.1.min.js"></script>                                              //引入jQuery脚本
       <script src="jquery.mobile-1.1.1.min.js"></script>                                    //引入jQuery Mobile脚本
     </head>
     <body>
              <div data-role="page">                                                          //此处为页面控件
         hello world                                                                          //在空间中插入内容hello world
          </div>
     </body>
     </html>

程序运行结果如图4-1所示。

该例虽然看上去非常简单，但是就像C语言中的helloworld一样，不但五脏俱全，同时也是今后利用jQuery Mobile进行应用开发时最基础的模板。

这实际上就是一个HTML页面，但是仔细观察会发现第5行有一句比较陌生的代码：

<meta name=”viewport” content=”width=device-width,initial-scale=”>

这行代码限定了页面的宽度要与设备的宽度保持一致。因为移动设备的种类实在是太多，作为开发者，肯定没有办法考虑到每一种设备的兼容性，因此只有借助于HTML本身来帮助我们。

接下来还有一个更加令人感到陌生的属性initial-scale=1，这个属性又是什么意思呢？这里可以来做一个实验，将“1”改为“2”运行之后看一下效果，结果如图4-2所示。

                         

图4-1 helloworld                                                             图4-2 修改后的hello world

可以看到屏幕中的字体整个放大了一倍。原来initial-scale=1的作用是规定了页面在加载时所要放大的倍数，等于1时即为保持原尺寸不变。这在开发中有着巨大的作用。

目前，电脑屏幕的分辨大多是1366*768像素，而最近的一些以高分辨率为亮点的智能手机的分辨率已经达到了720*1280像素，与此同时大多数人所使用手机的分辨率还停留 在一个较低的水平。这就导致了如果没有一种切实可行的手段来区分这些用户，开发人员就无法做到真正的完美用户体验。

那么到底有没有这样一种方法呢？当然是有的，只要通过修改initial-scale属性的值来放大页面的内容尺寸，就能够很好地实现不同设备上的兼容问题。在本篇最后的综合项目实   例中将给出一个这样的例子。

提示：meta是HTML中非常重要的一个标签，但是它的应用却常常被开发者所忽略。

如果您对学习跨平台APP感兴趣，如果您对jQuery Mobile感兴趣，欢迎阅读本书《构建跨平台APP：jQuery Mobile移动应用实战》

购买链接：

http://product.dangdang.com/23472199.html

http://item.jd.com/11459719.html

jqueryMobile应用第一课《构建跨平台APP：jQuery Mobile移动应用实战》连载一（Hello World）的更多相关文章

  1. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载一（PhoneGap中的API）

    之前本博连载过<构建跨平台APP:jQuery Mobile移动应用实战>一书.深受移动开发入门人员的喜爱. 从如今開始,连载它的孪生姐妹书phoneGap移动应用实战一书,希望以前是小白 ...

  2. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载四（使用程序载入事件）

    在了解了PhoneGap中都有哪些事件之后,本节将開始对这些事件的使用方法进行具体地介绍.本节要介绍的是程序载入事件,也就是deviceready.pause和resume这3个事件. [范例4-2 ...

  3. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载五（使用PhoneGap获取设备信息）

    除了能够将HTML页面打包成可以直接安装运行的APP外,PhoneGap的一个最大优势在于可以通过JavaScript调用设备来访问设备上的硬件信息,从而实现一些原本只有依靠原生SDK才能够达到的目的 ...

  4. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载三（通过实例来体验生命周期）

    4.1.2  通过实例来亲身体验Activity的生命周期 上一小节介绍了Activity生命周期中的各个过程,本小节将以一个简单的实例来使读者亲身体验到Activity生命周期中的各个事件. 在Ec ...

  5. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载二（生命周期）

    4.1 什么是生命周期 想要真正地理解PhoneGap应用开发的内涵,首先需要理解什么是生命周期.这在字面上其实非常容易理解,一个应用从开始运行被手机加载到应用被退出之间的过程就称之为一个生命周期.为 ...

  6. 构建跨平台APP开发的两本书，这里重点推荐下

    第一本是<构建跨平台:jquery Mobile移动应用实战> 是目前jqm开发写的比较入门的一本书,上手很快,但是高手我觉得就没有必要学习了,因为写的比较浅显. 第二本是<构建跨平 ...

  7. jquery Mobile应用第2课《构建跨平台APP：jQuery Mobile移动应用实战》连载二（简单的QWER键盘）

    在jQuery Mobile的布局中,控件大多都是单独占据页面中的一行,按钮自然也不例外,但是仍然有一些方法能够让多个按钮组成一行,比如说在范例6-5中就利用按钮分组的方法使4个按钮并列在一行中,如图 ...

  8. 【原创】小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载五（给按钮加图标）

    在范例5-4所使用的导航栏中,已经为按钮加入了图标的样式,但是当时并没有介绍按钮的图标究竟是怎么一回事.下面截取范例5-4中导航栏部分的代码: <divdata-role="foote ...

  9. 小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载四（场景切换）

    作为一款真正有使用价值的应用,首先应该至少有两个页面,通过页面的切换来实现更多的交互.比如手机人人网,打开以后先是进入登录页面,登录后会有新鲜事,然后拉开左边的面板,能看到相册.悄悄话.应用之类的其他 ...

随机推荐

  1. mysq 因断电而导致的错误

    问题来源: 昨天断电,而我没有保存,导致出现以下问题: 2015-10-12 10:48:10 7300 [Note] Plugin 'FEDERATED' is disabled. 2015-10- ...

  2. react与jQuery对比,有空的时候再翻译一下

    参考资料:http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-t ...

  3. Photoshop Cs5 64位系统破解版下载（内含破解方法）

    Photoshop Cs5 64位系统是电影.视频和多媒体领域的专业人士, 使用 3D 和动画的图形和 Web 设计人员, 以及工程和科学领域的专业人士的理想选择,下面提供Photoshop Cs5  ...

  4. ZigBee无线网络技术在小区路灯照明系统的应用

    小区路灯照明系统是楼宇智能的一部分,但受制于布线.成本等的问题,难以得以实施.随着计算机技术的迅猛发展,无线网络技术越来越成熟,ZigBee无线网络成本低.功耗低.传输距离远等的特点,非常适合在无线路 ...

  5. Tomcat源码分析——SERVER.XML文件的加载与解析

    前言 作为Java程序员,对于Tomcat的server.xml想必都不陌生.本文基于Tomcat7.0的Java源码,对server.xml文件是如何加载和解析的进行分析. 加载 server.xm ...

  6. 关于AIR新浪登录测试

    /** *由于在应用申请中,我设置的域名属于新浪云,因此在本地测试的话肯定不能成功的,有个办法就是直接在新浪云那边授权成功后,将token的值直接使用post或者get方法传递过来,直接在本地 *lo ...

  7. 在使用 百度编辑器 Ueditor 时，不能进入 Controller 相应的 Action 的处理方法

    如果在前端的页面中使用了 Ueditor 编辑器,那么在提交表单数据时,将不会执行 期望的 Controller 中的 Action ,造成这样的原因是: 在 MVC 4 的框架中,当前端页面需要提交 ...

  8. vc不用IDE编译方法

    一个EXE是如何形成的 比如一个源程序有以下两个文件. 1.c 1.rc 首先cl.exe 会把源代码编译为1.obj rc.exe会把1.rc编译为1.res link.exe会把1.obj 1.r ...

  9. gulp.spritesmith修改px为rem单位

    移动端开发中,使用gulp.spritesmith进行小图sprite并生成样式,但由于spritesmith默认是以px为单位,所以就把插件的内容修改了下让生成rem单位并且能把background ...

  10. Android IOS WebRTC 音视频开发总结（二二）-- 多人视频架构模式

    本文主要介绍多人视频会议服务端架构方式,文章来自博客园RTC.Blacker,转载必须说明出处,欢迎关注个人微信公众号blacker,更多详见www.rtc.help 随着移动互联网的迅速发展,很多公 ...