androidviewport
❶ 使用ScrollView属性fillViewport解决android布局不能撑满全屏的问题
最近在开发项目中遇到一个问题,布局高度在小屏幕手机上高度不够全部显示,于是使用了ScrollView嵌套LinearLayout,但问题又出现了,LinearLayout设置了martch_parent属性,但是却显示的并不是充满全屏幕。
于是点进ScrollView的源码里面寻找这个问题的答案,找到了这个方法。
注释上说这个方法的意思是是否ScrollView的内容充满视图,true则充满视图,false则不是。看到这里,再往困毕上找,发现这是这个字段对应着一个属性android:fillViewport
到现在已经很清晰了,把android:fillViewport="true" 属性家进入汪数芹试一下。问题解决,看效果图。
最重要的是将ScrollView中android:fillViewport设置为true。
当ScrollView里的元素想填满ScrollView时,使用"fill_parent"是不管用的,必需为ScrollView设置:android:fillViewport="毕衫true"。
当ScrollView没有fillVeewport=“true”时,里面的元素(比如LinearLayout)会按照wrap_content来计算(不论它是否设了"fill_parent"),而如果LinearLayout的元素设置了fill_parent,那么也是不管用的,因为LinearLayout依赖里面的元素,而里面的元素又依赖LinearLayout,这样自相矛盾.所以里面元素设置了fill_parent,也会当做wrap_content来计算.
❷ 在安卓手机端 容器没有定义固定宽, 使用viewport 后就缩成一半了
可能是你加的不对,参考我得写法:
<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">饥启
<metaname="apple-mobile-web-app-capable"content="yes"/>
<metaname="apple-mobile-web-app-status-bar-style"content="black-translucent"/>
<metaname="洞肢吵format-detection"content="telephone=yes"/>
<metaname="msapplication-tap-highlight"content="no"/>纳侍
你应该是做响应式布局的吧,这里有一篇响应式布局的示例,文章比较长不再全文贴出,参考:http://www.51xuediannao.com/html+css/htmlcssjq/704.html
❸ 移动开发 android:fillViewport="true" , android:scrollbars="none" 是干什么的呀求详解
android:fillViewport="true"
当一个高度值不足scrollview的子控件fillparent的时候,单独的定义android:layout_height="fill_parent"是不起作用的,必须加上fillviewport属性,当子控件的高度值大于scrollview的高度时,这个标签就没有任何意义了。
android:scrollbars="none"
隐藏滚动条
❹ Android中的网络应用之网页设置,检测、配置用户设备属性。
由于Android可用于具有各种屏幕尺寸和像素密度的设备,因此您应该在网页设计中考虑到这些因素,以便您的网页始终以适当的大小显示。
当您定位到Android设备的网页时,您应该考虑以下两个主要因素:
视口
视口是为您的网页提供可绘制区域的矩形区域。 您可以指定多个视口属性,例如其大小和初始刻度。 最重要的是视图端口宽度,它定义了从网页的角度可用的水平像素总数(可用的CSS像素数)。
屏幕密度
WebView类和大多数Web浏览器将您的CSS像素值转换为与密度无关的像素值,因此您的网页以与中密度屏幕(约160dpi)相同的可感知大小显示。 然而,如果图形是您的网页设计的重要元素,则应该密切关注不同密度下的缩放,因为320dpi屏幕上的300像素宽的图像将被放大(使用每个CSS像素更多的物理像素) ,它可以产生人造物(模糊和像素化)
视口是您的网页绘制的区域。 虽然视口的总可见区域与缩放后的屏幕大小匹配,但视口具有自己的像素尺寸,可用于网页。 例如,尽管设备屏幕的物理宽度可能为480像素,但视口的宽度可以为800像素。 当视口比例为1.0时,这允许设计为800像素宽的网页在屏幕上完全可见。 默认情况下,Android(包括Chrome)上的大多数网络浏览器都将视口设置为较大的尺寸(称为“宽视口模式”,大约为980px宽)。 许多浏览器也尽可能缩小,默认情况下显示完整的视口宽度(称为“概览模式”)。
注意:当您的页面在WebView中呈现时,默认情况下不会使用宽视口模式(页面以完全缩放显示)。 您可以使用setUseWideViewPort()启用宽视口模式。
您可以使用文档<head>中的<meta name =“viewport”...>标签来定义网页视口的属性,例如宽度和初始缩放级别。
以下语法显示所有支持的视口属性和每个受支持的值的类型:
例如,以下<meta>标记指定视口宽度应与设备屏幕宽度完全相符,并且应禁用缩放功能:
当优化您的移动设备的站点时,通常应将宽度设置为“设备宽度”,以使尺寸完全符合所有设备,然后使用CSS媒体查询来灵活地调整布局以适应不同的屏幕尺寸。
注意:只有当您确定您的网页布局是灵活的并且内容适合小屏幕的宽度时,才应禁用用户缩放。
Android浏览器和WebView支持CSS媒体功能,允许您为特定的屏幕密度创建样式 - -webkit-device-pixel-ratio CSS媒体功能。 您应用于此功能的值应为“0.75”,“1”或“1.5”,以表示样式分别用于具有低密度,中密度或高密度屏幕的设备。
例如,您可以为每个密度创建单独的样式表:
或者,在一个样式表中指定不同的样式:
有关处理不同屏幕密度(尤其是图像)的更多信息,请参阅高DPI图像以获得可变像素密度
使用JavaScript定位设备密度
Android浏览器和WebView支持DOM属性,可以让您查询当前设备的密度,即window.devicePixelRatio DOM属性。此属性的值指定用于当前设备的缩放因子。例如,如果window.devicePixelRatio的值为“1.0”,则设备被认为是中密度设备,默认情况下不应用缩放;如果值为“1.5”,则设备被认为是高密度设备,默认情况下页面缩放为1.5x;如果值为“0.75”,则设备被认为是低密度设备,默认情况下页面缩放为0.75x。当然,Android浏览器和WebView应用的扩展是基于网页的目标密度,如关于定义视口目标密度的部分所述,默认目标是中等密度,但是您可以更改目标来影响如何您的网页会缩放不同的屏幕密度。
例如,以下是使用JavaScript查询设备密度的方法:
Supporting Different Screens in Web Apps
以上内容为官方翻译,翻译不准确地方望指出:
❺ 如何利用html5开发android界面
H5开发安卓界面需要注意以下三点:
(上)包括Android设备多分辨率的问题,Android中构建HTML5应用程序基础
(中)包括Android与JS之间的互动,Android处理JS的警告对话框等,Android中的调试
(下)包括本地储存在Android中的应用,地理位置的应用,离线应用的构建
进入正题
● Android设备多分辨率的问题
Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示
Android浏览器和WebView默认为mdpi。hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍
三种解决方式:1 viewport属性 2 CSS控制 3 JS控制
1 viewport属性放在HTML的<meta>中
html代码:
<span style="font-size: x-small;"> <head>
<title>Exmaple</title>
<meta name=”viewport” content=”width=device-width,user-scalable=no”/>
</head></span>
meta中viewport的属性如下:
<span style="font-size: x-small;"> <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]
"
/>
</span>
2 CSS控制设备密度
为每种密度创建独立的样式表(注意其中的webkit-device-pixel-ratio 3个数值对应3种分辨率)
html代码:
<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" />
3 JS控制
Android浏览器和WebView支持查询当前设别密度的DOM特性
window.devicePixelRatio 同样值有3个(0.75,1,1.5对应3种分辨率)
JS中查询设备密度的方法
js代码:
if (window.devicePixelRatio == 1.5) {
alert("This is a high-density screen");
} else if (window.devicePixelRation == 0.75) {
alert("This is a low-density screen");
}
Android中构建HTML5应用
使用WebView控件 与其他控件的使用方法相同 在layout中使用一个<WebView>标签
WebView不包括导航栏,地址栏等完整浏览器功能,只用于显示一个网页。
❻ android webview 怎么放大缩小
Android:WebView如何设定支持缩放:需要对WebView和WebSettings做一下设定
webview.setVerticalScrollbarOverlay(true); //指定的垂直滚动条有叠加样式
WebSettings settings = webview.getSettings();
settings.setUseWideViewPort(true);//设定支持viewport
settings.setLoadWithOverviewMode(true);
settings.setBuiltInZoomControls(true);
settings.setSupportZoom(true);//设定支持缩放
html界面meta标签
<metaname="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"]//是否允许用户对页面缩放 "/>
例如:<meta name="viewport" content="width=device-width,user-scalable=yes initial-scale=1.0, maximum-scale=2.0">-->设定支持缩放,最大两倍缩放