Android中Web Apps的目标屏幕

6 篇文章 0 订阅
4 篇文章 0 订阅

原文来自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来将他们应用于不同的屏幕。

参考http://ucdchina.com/snap/7166

http://hi.baidu.com/android7/blog/item/f28bbba573e89b9ed04358fd.html

 

使用Viewport Metadata

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

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

 

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值