`
WebAppTrend
  • 浏览: 54982 次
社区版块
存档分类
最新评论

Android官方开发中心之Web Apps屏幕适配

 
阅读更多

概览

  • 你可以使用viewport的元数据、CSS和Javascript来为不同分辨率的屏幕设置合适的页面
  • 本文档中的技术适用于Android 2.0及以上设备,针对默认的Android Browser中及在WebView 中呈现的页面

如果你在为Android开发Web应用或者在为移动设备重新设计一个Web应用,你需要仔细考虑在不同设备上你的页面看起来是怎样的。因为Android设备有不同款型,因此你需要考虑影响你的页面在Android设备上展示的一些因素。

注意:  该文档中考虑的特性只被Android 2.0 以及更高版本上的Android Browser application(由默认Android平台提供的)和WebView (用以展现web页面的框架工具集)支持。在Android上运行的第三方浏览器可能并不支持这些用来控制viewport和分辨率的特性。

当为Android设备设计页面时,有两个需要考虑的基本因素:

Viewport的大小以及web page的规模

当Android Browser加载一个页面的时候,默认是以"overview mode"加载,以提供一个放大的页面。你可以通过定义viewport的默认尺寸或者是viewport的初始规模来改写这一行为。你同样可以控制用户 放大或缩小页面的程度。用户也可以在浏览器设置中屏蔽overview mode,这样的情况下你就不应该假设你的页面是以overview mode加载的。相反,你应该为你的页面定制合适的viewport大小和规模。

然而,当你的页面在WebView 中展现的时候,页面是以最大化形式加载的(而不是"overview mode")。也就是说,它是以页面默认大小展示的,而不是放大以后的页面(即使用户屏蔽了overview mode,页面也是如此展示)。

设备屏幕的分辨率

Android设备的屏幕分辨率会影响web页面展现的分辨率和展现大小。(有三种屏幕分辨率:低、中、高。)Android浏览器和WebView 通过缩放页面来适应不同屏幕分辨率,这样所有的设备都是以默认大小即中分辨率的大小来展示web页面的。如果在你的web页面中,图像是很重要的一部分,那么你就需要密切关注在不同分辨率下发生的缩放,因为图像缩放可能会带来模糊以及像素化的问题。

为了在所有分辨率下都能提供最好的视觉效果,你需要通过提供你的页面的目标分辨率的viewport元数据来控制缩放,并通过使用CSS或者Javascript来为不同分辨率提供不同图像。

这篇文档剩下的部分讲述了你该如何考虑这些影响并为不同类型的屏幕提供一个好的设计。

使用Viewport 元数据

Viewport 是指用以展现你的页面的区域。尽管viewport的可见区域和屏幕大小是匹配的,但是它有着自己的尺寸(dimensions),这一尺寸决定了页面上 可见的像素点。也就是说,一个web页面在扩张到整个屏幕之前占用的像素数据是由viewport的尺寸(dimensions)来定义的,而不是设备屏 幕的尺寸。例如,尽管一个设备的屏幕宽480像素,但是viewport宽800像素,那么这个web页面需要在800像素宽的屏幕上才能完全展现。

你可以在HTML中使用 <meta>  tag(这个tag必须包含在文档的<head> 中)来为你的页面定义viewport的性质。你可以在 <meta>  tag的content  属性中,定义多个viewport性质。例如,你可以定义viewport的高和宽,页面的最初大小,以及目标屏幕分辨率。content  属性中的每个viewport性质必须以逗号相隔。

例如,下面的HTML片段指定了viewport宽度必须严格和屏幕宽度匹配,并禁用了放大功能:

<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

这是个定义两个viewport性质的例子。下面的语法显示了所有受支持的viewport性质及各个性质接受的数据基本属性:

<meta name="viewport"
      content="
          height

 = [pixel_value

 | device-height] ,
          width

 = [pixel_value

 | device-width ] ,
          initial-scale

 = float_value

 ,
          minimum-scale

 = float_value

 ,
          maximum-scale

 = float_value

 ,
          user-scalable

 = [yes | no] ,
          target-densitydpi

 = [dpi_value

 | device-dpi |
                               high-dpi | medium-dpi | low-dpi]
          " />

下面的部分讨论了如何使用这些viewport性质以及可以赋给这些性质的值到底是怎样。

 

定义viewport大小


Figure 1. 一个web页面,其中有320像素宽的图像,在Android Browser中呈现,没有设置viewport元数据(开启了"overview mode",viewport默认为800像素宽)

Viewport的height 和 width性质让你可以指定viewport大小(即页面在扩张到屏幕之前可见的大小)。

跟 上面提到的一样,Android Browser默认以"overview mode"加载页面(除非这一模式被用户禁用),将最小的viewport宽度定义为800像素。因此,如果你的web页面定义的宽度为320像素的话, 那么你的页面看起来就比屏幕小(除非你的物理屏幕是320像素宽的,因为viewport模拟出了一个800像素宽的可绘图区域),就如figure 1中所示。为避免这一影响,你需要显式定义viewport的width与你设计的web页面的宽度匹配。

例如:如果你的web页面是设计为320像素宽的,那么你就需要为viewport的width指定相同大小如下:

<meta name="viewport" content="width=320" />

在这个例子中,你的web页面和屏幕宽度大小刚好是匹配的,因此页面宽度和viewport的width是一致的。

注意:  大于10,000的width值将被忽略,小于或等于320的值将会使得width的值等于设备的宽度(下面将会讨论)。大于10,000或者小于200的height值将被忽略。

为了展现这个性质是如何影响页面大小的,figure 2展示了一个web页面,在这里,web页面中包含一个320像素宽的图像,但是viewport的width设置为400.

注意: 如果你设置viewport的width与页面宽度匹配而设备屏幕大小和这些尺寸不匹配的话,web页面将仍然占满整个屏幕,即使设个设备屏幕是低分辨率或者高分辨率的,因为Android Browser和WebView  默认将web页面缩放到中等分辨率屏幕大小(如同你在figure 2中看到的一样,图中对比了高分辨率和中等分辨率设备)屏幕分辨率在Defining the viewport target density 中有更多讨论。

自动缩放


Figure 2. 设置viewport width=400 ,开启 "overview mode" (页面中的图像为 320 像素宽).

除 了将viewport尺寸定义为精确的数值以外,你还可以将其设置为永远和设备屏幕尺寸匹配,即将viewport的height和width分别赋值为 device-height 和device-width。这在你开发一个有着活动大小的web应用的时候是非常合适的,这能使这个web应用的页面好像是固定的(和每个屏幕宽度都精 确匹配)。例如:

<meta name="viewport" content="width=device-width" />

Figure 3. 设置 viewport width=device-width or initial-scale=1.0的web页面.

设置viewport尺寸永远和屏幕尺寸匹配结果如figure 3所示。需要注意的是,这样的设置会导致图片缩放到与屏幕匹配,即使当前设备和target density (默认情况下是中等分辨率)并不匹配。因此,figure 3中的高分辨率设备的图片在中等分辨率的设备上放大了,以便和屏幕宽度匹配。

注意: 如果你希望device-width 和 device-height和设备的物理屏幕的像素匹配,而不是通过缩放web页面来和target density匹配,那么你就必须包含一个target-densitydpi性质并将其赋值为 device-dpi。这在Defining the viewport density 中将会有更多讨论。否则,只使用device-width 和 device-height来定义viewport大小的话会让你的页面自动适应每个屏幕,但是你的图片也会缩放以便适应不容屏幕分辨率。

定义viewport规模

Viewport规模确定了页面的缩放程度。Viewport性质能让你以下面的方式指定页面缩放程度:

初始缩放( initial-scale

即页面初始缩放程度。这是一个浮点值,是页面大小的一个乘数。例如,如果你设置初始缩放为“1.0”,那么,web页面在展现的时候就会以target density 分辨率的1:1来展现。如果你设置为“2.0”,那么这个页面就会放大为2倍。

默认的初始缩放值是通过计算让页面和viewport大小匹配。因为默认viewport宽度是800像素,如果设备屏幕分辨率宽度小于800,那么初始缩放值在默认情况下是小于1.0的,以便和屏幕上的800像素宽的页面匹配。

最小缩放( minimum-scale

即允许的最小缩放程度。这是一个浮点值,用以指出页面大小与屏幕大小相比的最小乘数。例如,如果你将这个值设置为“1.0”,那么这个页面将不能缩小,因为最小值和 target density 为1:1的关系。

最大缩放( maximum-scale

即允许的最大缩放程度。这也是一个浮点值,用以指出页面大小与屏幕大小相比的最大乘数。例如,如果你将这个值设置为“2.0”,那么这个页面与target size相比,最多能放大2倍。

用户调整缩放( user-scalable

即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变,反之为no。默认值是yes。如果你将其设置为no,那么minimum-scale 和 maximum-scale都将被忽略,因为根本不可能缩放。

所有的缩放值都必须在0.01–10的范围之内。

例如:

<meta name="viewport" content="initial-scale=1.0" />

这个元数据将初始缩放值定义为和viewport的target density相比为满屏。

定义viewport的target density

一 个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi)。Android支持三种屏幕像素密度:低像素密度,中像素密度,高像素密度。 一个低像素密度的屏幕每英寸上的像素点更少,而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView 默认屏幕为中像素密度。

因为默认target density是中像素密度,因此当用户拥有一个低像素或者高像素密度的屏幕时,Android Browser和 WebView 会缩放页面,以便它们能在中等像素密度的屏幕以合适的大小展示。更具体来说,Android Browser和 WebView 会在高像素密度设备上将页面放大约1.5倍(因为高像素密度设备上的像素点更小),而在低像素密度设备上将页面缩小为约0.75倍(因为低像素密度设备上的像素点更大)。

由 于默认缩放,figure 1,2,3展现了同样物理大小的web页面在高像素密度设备和中等像素密度设备上的效果(高像素密度设备上的web页面放大到实际的1.5倍,以便和 target density匹配)。这会给图像带来一些问题。比如,尽管一个图像在中等像素密度和高像素密度设备上看起来大小一样,但是高像素密度设备上的图像看起来 更为模糊,因为这个图像本来是为320像素宽而设计的,但却被拉到了480像素宽。


Figure 4. 设置 viewport width=device-width , target-densitydpi=device-dpi的web页面.

你可以通过使用viewport的target-densitydpi 性质来改变目标屏幕像素密度。可以赋给它的值如下所列:

  • device-dpi  –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
  • high-dpi  – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。.
  • medium-dpi  – 使用mdpi作为目标 dpi。 高像素密度设备相应放大, 像素密度设备相应缩小。 这是默认的target density.
  • low-dpi  -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
  • <value>  - 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。

例如,为了防止Android Browser和WebView  根据不同屏幕的像素密度对你的页面进行缩放,你可以将viewport的target-densitydpi  设置为 device-dpi 。当你这么做了,页面将不会缩放。相反,页面会根据当前屏幕的像素密度进行展示。在这种情形下,你还需要将viewport的width定义为与设备的width匹配,这样你的页面就可以和屏幕相适应。例如:

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

Figure 4 展示了使用这些设置的一个web页面——在高像素密度设备上,这个页面看起来小一些了,因为它的物理像素点比中等像素密度设备上的像素点要小,而又没有缩 放发生,因此320像素宽的图像在两个界面上都只占用了320像素宽。(如果你想要根据屏幕像素密度来定制你的web页面的话,你就应该如此定义 viewport,并使用CSS  或者 JavaScript 来为不同像素密度设备提供不同图像。)

针对不同像素密度应用CSS

Android Browser和WebView 支持一个CSS的media特性,让你能为特定像素密度的设备来创建styles——这个media特性就是 -webkit-device-pixel-ratio  CSS media feature。你赋给这个特性的值应该是"0.75", "1", 或 "1.5",来分别指出styles是针对低像素密度、中等像素密度和高像素密度的。

例如:你可以为不容像素密度创建样式列表stylesheets如下:

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />

 


Figure 5. 使用CSS中的 -webkit-device-pixel-ratio 来为不同分辨率的屏幕指定不同web页面。注意在hdpi设备中使用的是一幅不同的图片。

或者,在一个样式表中指定不同的styles:

#header {

background:url(medium-density-image.png);

}

@media screen and (-webkit-device-pixel-ratio: 1.5) {

/* CSS for high-density screens */

#header {

background:url(high-density-image.png);

}

}

@media screen and (-webkit-device-pixel-ratio: 0.75) {

/* CSS for low-density screens */

#header {

background:url(low-density-image.png);

}

}

注意: #header 默认的style是将图片应用于中等像素密度的设备,以支持Android2.0以下的设备,这些设备是不支持-webkit-device-pixel-ratio 的。

根据你设置的viewport性质不同,你要调整的对不同像素密度的styles的风格也应该不同。为了让你的页面能在不同像素密度下都有合适的styles,你需要将viewport的宽度设置为与设备匹配。即:

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

通过这种方式,Android Browser和 WebView 就不会对你的页面进行缩放,并且viewport的width能与设备的width精确匹配。这一设置效果如figure 4所示。然而,通过使用-webkit-device-pixel-ratio  ,你可以应用不同的styles。例如,在figure 5中,展示了一个使用如上viewport设置并使用了一些CSS的页面,在这个CSS中,定义将高分辨率的图像用于高像素密度的屏幕。

针对不同像素密度应用 JavaScript

Android Browser和 WebView 支持一个文档对象模型(DOM)特性,可以让你查询当前设备的像素密度——即DOM的window.devicePixelRatio  特性。这个特性的值指定了当前设备的缩放因子。例如,如果window.devicePixelRatio 的值是“1.0”,则这个设备是一个中等像素密度的设备,默认不缩放;如果window.devicePixelRatio 的值是“1.5”,则这个设备是一个高像素密度的设备,默认以1.5倍缩放;如果window.devicePixelRatio 的值是“0.75”,则这个设备是一个低像素密度的设备,默认以0.75倍缩放。当然,Android Browser 和WebView  是根据页面的target density进行缩放的,和上文 讨论的一样,其默认target是中等像素密度,但是你可以修改这个target,调整你的页面在不同屏幕分辨率下的缩放方式。

例如:你可以像下面这样通过Javascript来查询设备像素密度:

if (window.devicePixelRatio == 1.5) {
  alert("This is a high-density screen");
} else if (window.devicePixelRatio == 0.75) {
  alert("This is a low-density screen");
}

原文链接:Targeting Screens from Web Apps

 

译文来源:http://www.webapptrend.com/
 WebAppTrend是一个独立的技术博客,关注Web App前瞻和实践,以及智能浏览器发展 

请大家在关注ITeye的同时,关注我们的新浪微博 @WebAppTrend,关注我们的腾讯微博@WebAppTrend,Q Q群见官方博客右侧。
分享到:
评论

相关推荐

    Apress Pro Android Web Apps Develop for Android Using HTML5, CSS3 & JavaScript

    《Apress Pro Android Web Apps Develop for Android Using HTML5, CSS3 & JavaScript》这本书详细探讨了如何利用HTML5、CSS3和JavaScript技术在Android平台上构建高效、功能丰富的移动Web应用。以下是一些关键知识...

    web apps适配研究2

    本文将基于“web apps适配研究2”的主题,深入探讨Web应用在Android平台上的屏幕适配策略。 一、理解屏幕适配的重要性 1. 用户体验:良好的屏幕适配能够确保Web应用在各种设备上提供一致且舒适的用户体验。无论是...

    Pro-Android-Web-Apps-Developing-HTML5-JavaScript-CSS-and-Chrome-OS-Web-Apps.pd

    ### Pro-Android Web Apps:开发HTML5、JavaScript、CSS及Chrome OS Web应用 #### 标题解析 本书的标题清晰地表明了其主要内容是关于如何使用HTML5、JavaScript与CSS来开发面向Android平台的Web应用,并提及了...

    web apps适配

    总结,Web Apps的屏幕适配是一个综合性的任务,涉及到设计、前端开发和性能优化等多个方面。通过响应式设计、流式布局、独立像素、触控优化、图标字体以及移动优先等技术,我们可以构建出跨设备、跨屏幕尺寸的优质...

    Office Web Apps Server

    使用`Import-Module ServerManager`导入模块,接着运行`Add-WindowsFeature`命令,添加一系列Web服务器角色和服务,包括Web服务器、静态内容、应用程序开发等,以满足Office Web Apps Server的基本需求。 完成基础...

    Pro Android Web Apps: Develop for Android Using HTML5, CSS3 & JavaScript

    本书《Pro Android Web Apps: Develop for Android Using HTML5, CSS3 & JavaScript》是面向熟悉Web应用开发的开发者,教授他们如何为Android移动平台编写和构建网页应用。以下将详细阐述标题与描述中提到的知识点:...

    office web apps整合

    你需要部署一个Wopi Host,这个服务器需要实现WOPI协议,以便Office Web Apps能够与之交互。文件名`wopihost`可能是指该项目的源代码或者服务器实例。 2. **实现WOPI接口**: WOPI接口定义了一系列的RESTful API,...

    ASP.net office web apps整合

    这个技术结合了ASP.NET的强大Web开发框架与Office Web Apps的在线文档处理能力,为用户提供了一种无缝的云服务体验。 在ASP.NET中整合Office Web Apps,主要涉及以下几个关键知识点: 1. **ASP.NET框架**:ASP.NET...

    Android Web应用开发-英文版

    通过阅读《Apress.Pro.Android.Web.Apps.Feb.2011.pdf》这本书,开发者将全面了解Android Web应用开发的各个环节,包括基本概念、实践技巧以及最佳实践,从而能够开发出高效、用户友好的移动Web应用。同时,Readme....

    Office Web Apps示例程序

    1. **OWA Host**:这可能是一个自定义开发的Web应用程序,它利用Office Web Apps的API和服务接口,来在用户的Web浏览器中显示和操作Office文档。这个"OWA host"文件可能是一个源代码项目,使用Visual Studio 2012...

    Building Progressive Web Apps(EarlyRelease) epub

    Building Progressive Web Apps(EarlyRelease) 英文epub 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除

    Beginning Android Web Apps Development

    With Beginning Android Web Apps Development, you'll learn how to apply HTML5, CSS3, JavaScript, Ajax and other Web standards for use on the Android mobile platform, by building a variety of fun and ...

    OWASP_Broken_Web_Apps_VM_1.2

    ### OWASP Broken Web Apps VM 1.2:深入解析与实战指南 #### 一、OWASP Broken Web Apps VM 概览 **OWASP Broken Web Apps VM**(虚拟机)是OWASP基金会推出的一个用于安全测试的学习平台。它包含了多个故意设计...

    android-kotlin-fundamentals-apps,Android Kotlin Fundamentals应用程序.zip

    在Android开发领域,Kotlin已经成为了首选的编程语言,以其简洁、安全的特性赢得了广大开发者的心。本篇将深入探讨"android-kotlin-fundamentals-apps"这个开源项目,它是一个专为学习Android Kotlin Fundamentals...

    Office Web apps Server搭建.doc

    您可以安装 Office Web Apps Server 作为单服务器 Office Web Apps Server 场,或者作为多服务器、负载平衡 Office Web Apps Server 场。您可以使用物...

    Learn Android Studio- Build Android Apps Quickly and Effectively

    对于希望进入移动应用开发领域的开发者而言,掌握Android Studio这一官方推荐的集成开发环境(IDE)至关重要。本教材旨在帮助读者快速有效地学习Android Studio,并通过实践构建功能完善的Android应用程序。 #### 二...

    Vue.js Up & Running Building Accessible and Performant Web Apps pdf

    《Vue.js Up & Running: Building Accessible and Performant Web Apps》是一本专注于使用Vue.js框架构建可访问且高性能Web应用的指南。Vue.js是目前非常流行的前端JavaScript框架,以其轻量级、易学易用和灵活性...

Global site tag (gtag.js) - Google Analytics