用html5开发的应用,屏幕适配的问题如何解决?

html-css07

用html5开发的应用,屏幕适配的问题如何解决?,第1张

目前大部分网站已经逐渐尝试使用HTML5进行重构,但基本大多停留使用新的HTML5语义化标签上。对于低版本IE浏览器,兼容新的HTML5标签很容易。而HTML5的新属性用到的不多,通常都是新属性+js兼容法。对于特殊的功能性新标签,国内几乎没有大型网站使用,如video、audio、canvas等。在国内,要是等现代浏览器普及了再开始用HTML5那至少要5年以上,IE6应该还有1年左右就差不多灭绝了,IE8短时间内不会灭绝。建议可以考虑HTML5+兼容性辅助,让现代浏览器显示炫酷效果,老浏览器保证业务正常即可,不一定和HTML5版本样式完全一样,只要最基本功能有就行了。移动端大多是webkit内核,可放心使用HTML5。

第1部分:

基本的屏幕适配知识:

1、屏幕大小

在Android系统中,把屏幕大小分为以下4种:small、normal(标准)、large、

extra large(引申为更大的屏幕)。

2、屏幕密度

在Android系统中,屏幕密度指的是在指定的屏幕大小区域内,有多少个像素。基本单位为dpi(点/每英寸)。

基本包括4种密度:low、dedium(中等)、high、extra high(引申为更高的密度)。

常见的屏幕密度如下:QVGA(240x320)、HVGA(320x480)、WVGA800(480x800)

第2部分:

Android官方的解决方案:

从Android1.6版系统起,res文件夹下面的drawable文件夹由原来的1个变为了3个。

如下图所示:

这三个文件夹分别用来存放高密度、中等密度和低密度的图片。

具体的适配方法,用一个案例来说明。

例如:

创建一个工程:test_demo_01

在3个drawable文件夹下面分别放置高密度、中等密度和低密度的图片。

然后在AndroidMainfest.xml中添加如下内容:

此外需要注意的是:

1、图片布局的基本单位应该是dip。

2、不要使用绝对布局(AbsoluteLayout)。

以下是3种屏幕的自适应结果