jqueryMobile应用第一课《构建跨平台APP：jQuery Mobile移动应用实战》连载一（Hello World）...

男娘i 2022-01-17 04:29 165阅读 0赞

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

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

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

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

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

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

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

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

![SouthEast][] ![SouthEast 1][]

图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_product.dangdang.com_23472199.html]

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

![SouthEast 2][]

转载于:https://blog.51cto.com/9198856/1441455

[SouthEast]: https://img-blog.csdn.net/20140709155508097?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYm9va3poYW9waW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: /images/20220117/0887e3008c914c15bdb55fb74b7849ac.png
[http_product.dangdang.com_23472199.html]: http://product.dangdang.com/23472199.html
[SouthEast 2]: /images/20220117/4d237c6395ba41c6a3e1f21e8aff9cd2.png