Android中Web Apps的目标屏幕


原文来自Android开发文档

Targeting Screens from Web Apps

对于不同Android设备的web页面，需要注意两点基本的要素：

1.页面的viewport和scale的大小

Android浏览器加载页面时，默认加载方式为“overview mode”，显示一个全局的视图。你可以覆盖重写这个行为，通过定义viewport的大小或者初始化viewport的scale。同样，你可以通过控制缩放大小来控制。

另外，用户可以通过在浏览器设置中关闭overview mode。

尽管如此，当使用WebView来渲染一个页面时，页面使用full zoom（而不是overview mode）来加载。

2.设备的屏幕密度（分辨率）

设备的屏幕分辨率（pixels per inch）也影响页面的分辨率和大小（三种屏幕分辨率low，medium，high）。Android浏览器和WebView为各种大小的屏幕分辨率进行补偿，这样所有设备显示的页面在一个相同的在medium可感知的大小。如果图像对页面来说是个重要的元素，你应该密切注意在不同目标机的scaling，因为image的scaling可以人为改变模糊程度和像素。

为了在所有目标屏幕上提供最佳的可视化表现，应该通过viewport metadata和提供对不同目标屏幕可转变的图片，你可以通过使用CSS和JavaScript来将他们应用于不同的屏幕。

使用Viewport Metadata

例如，虽然一个设备的屏幕的宽度为480pixels，viewport可以使800pixels宽，这样，页面就可以设计为800pixels宽，就能在屏幕上看到完整的视图。

页面的HTML的meta标签中使用viewport属性（必须放在head标签中）

  1. <head>  
  2.     <title>Example</title>  
  3.     <meta name="viewport" content="width=device-width, user-scalable=no" />  
  4. </head>  

 

  1. <meta name="viewport"  
  2.       content="   
  3.           height = [pixel_value | device-height] ,   
  4.           width = [pixel_value | device-width ] ,   
  5.           initial-scale = float_value ,   
  6.           minimum-scale = float_value ,   
  7.           maximum-scale = float_value ,   
  8.           user-scalable = [yes | no] ,   
  9.           target-densitydpi = [dpi_value | device-dpi |   
  10.                                high-dpi | medium-dpi | low-dpi]   
  11.           " />  

 

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

相关内容