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">-->設定支持縮放,最大兩倍縮放