Appcan开发之页面布局与CSS排版

最新推荐文章于 2024-05-29 14:05:18 发布

KylinBL

最新推荐文章于 2024-05-29 14:05:18 发布

阅读量8.2k

点赞数

分类专栏： appcan移动开发

appcan移动开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在Appcan开发中，首先要进行的就是页面布局，然后在这个页面上填充数据，加上互动元素，最终构成完整的应用。

因为appcan是使用HTML5+CSS3+JavaScript技术来进行开发，所以与普通web开发基本没有区别，理解成webapp的开发或许更好解释。

iOS、Android系统中已经内置webkit内核，而appcan正是利用webkit来运行我们编写的页面，也就是可以将appcan看作是一个加强的webkit内核，强在它能通过JS来控制手机某些功能，比如打电话、发短信、定位等等，这是普通webapp所不能达到的。

HTML页面布局

下面就介绍一些在appcan需要注意的问题，避免这些问题所带来的麻烦。

移动设备屏幕一般都比较小，在手机浏览器直接浏览网页时，会对网页进行缩放。可是我们开发的是类似原生的应用，是不能允许用户对网页区域进行缩放、调整大小操作的，那如何来解决呢？

我们可以在appcan里新建一个叫index.html的页面模板，看它头部代码：

<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
  <head>
    <title>
    </title>
    <meta charset="utf-8">
    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="css/ui-base.css">
    <link rel="stylesheet" href="css/ui-media.css">
    <script src="js/zy_control.js">
    </script>
    <script src="js/zy_click.js">
    </script>
    <script>
	</script>
  </head>

从代码上可以看到，页面采用标准的HTML5头部声明。<title> 标签可有可无，留空也可。接下来是声明页面编码，建议使用UTF8编码，因为JS中ajax与json编码只能是UTF8，所以最好使用UTF8，避免出现乱码和程序异常。

现在进入重点部分，viewport这个元属性，什么是viewport？

我再分别解释一下content里的内容。

target-densitydpi=device-dpi，指定屏幕像素密度DPI，device-dpi 为设备原本的DPI值，不会有任何缩放。

width=device-width，指定屏幕宽度，device-width设备屏幕的宽度。

initial-scale=1，初始缩放比例，设置为1，表示不进行任何缩放，显示原始大小。

user-scalable=no，用户否否可以手动缩放页面，设为no不允许。

minimum-scale=1.0，最小缩放比例，设为1，最小只能缩放到1倍。

maximum-scale=1.0，最大缩放比例，设为1，最大只能缩放到1倍，与上一项配合，保证，页面不会进行缩放。

其实user-scalable为no时，最后两项不会起作用，因为不会发生缩放问题，图个心安，就都放上了。

这样设置完成后，就能够保证，在任何设备中，网页的宽度就是屏幕显示区域的宽度，不会发生变化，这样我们进行排版里就不会出现问题，这也是与普通web开发比较大的不同之处了。

ui-media.css 这个文件就是官方默认生成的CSS文件，文件大概的用途就是在不同分辨屏下设置相对合适的字体大小，从9px到32px不等，iphone为16px, ipad1为20px，800*480的android机基本为24px。正是因为这个文件，所以才使得在不同大小的屏幕上的字体看起来不会有太大的比例失调问题，比如在ipad上字体不会显示得太小，iphone上不会太大。更重要的是文字的大小会直接影响以后CSS长度单位的设置！