- 构建跨平台APP:jQuery Mobile移动应用实战(第2版) (跨平台移动开发丛书)
- 李柯泉
- 747字
- 2024-10-30 00:11:25
4.1 依然从hello world开始
有人说每个程序员都曾经有过改变世界的梦想,笔者认为,这与程序员年轻时编写的第一个程序有着莫大的关系。一句简单的hello world让年轻的心开始相信梦想,用一种低调的壮志凌云向世界展示自己的存在。那么,今天就让我们从hello world开始逐梦之旅吧。
【范例4-1 简单的页面——hello world】
01 <! DOCTYPE html> 02 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.min.css" /> //jQuery Mobile样式文件 08 <script src="jquery-2.1.4.min.js"></script> //引入jQuery脚本 09 <script src="jquery.mobile.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所示。
图4-1 hello world
该例虽然看上去非常简单,但是它就像C语言中的hello world一样,是今后利用jQuery Mobile进行应用开发时最基础的模板。
这实际上就是一个HTML页面,但是仔细观察会发现第5行的代码比较陌生:
<meta name="viewport" content="width=device-width, initial-scale=1">
这行代码限定了页面的宽度要与设备的宽度保持一致。因为移动设备的种类实在太多,作为开发者,肯定没有办法考虑到每一种设备的兼容性,因此只有借助于HTML本身来帮助我们。
接下来还有一个更加令人感到陌生的属性initial-scale=1,这个属性又是什么意思呢?可将1改为2运行之后看一下效果,结果如图4-2所示。
图4-2 修改后的hello world
可以看到屏幕中的字体放大了一倍。原来initial-scale=1的作用是规定页面在加载时所要放大的倍数,等于1时即为保持原尺寸不变。
目前,电脑屏幕的分辨大多是1366×768像素,而最近一些以高分辨率为亮点的智能手机的分辨率已经达到了720×1280像素,与此同时大多数人所使用手机的分辨率还停留在一个较低的水平。这就导致了如果没有一种切实可行的手段来区分这些用户,开发人员就无法做到真正完美的用户体验。
那么到底有没有这样一种方法呢?当然是有的,只要通过修改initial-scale属性的值来放大页面的内容尺寸,就能够很好地实现不同设备上的兼容问题。在本章最后的综合项目实例中将给出一个这样的例子。
提示
meta是HTML中非常重要的一个标签,但是它的应用却常常被开发者所忽略。