通過WebView正確縮放Android設備上的網站

我的應用程序是一個簡單的WebView「包裝器」，它以固定的橫向顯示網頁，頁面有一個居中的div，寬度爲760px，高度爲415px，這應該可以在所有設備上縮放顯示，因此它（大致）適合屏幕，用戶不能改變縮放比例...我已經差不多除了縮放之外，還有一切工作。通過WebView正確縮放Android設備上的網站

我在網頁上有以下視窗meta標籤：

<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

清單的WebView包裝.apk我創建如下：

<supports-screens android:smallScreens="true" 
android:normalScreens="true" android:largeScreens="true" 
android:anyDensity="true" /> 

<application android:icon="@drawable/icon" android:label="@string/app_name"> 
    <activity android:name="{my name}" 
      android:theme="@android:style/Theme.NoTitleBar.Fullscreen" 
      android:label="@string/app_name"> 
     <intent-filter> 
      <action android:name="android.intent.action.MAIN" /> 
      <category android:name="android.intent.category.LAUNCHER" /> 
     </intent-filter> 
    </activity> 
</application>

我應該指出，最初的.apk目標是Android 2.2，我最近更改爲2.3.1，並在清單中添加了另一行，但這對任何內容都沒有影響：

android:xlargeScreens="true"

我添加到.java以下代碼：

webview.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY); 
webview.setScrollbarFadingEnabled(false); 
webview.getSettings().setSupportZoom(false); 
webview.getSettings().setBuiltInZoomControls(false); 
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

對於這個問題的目的只是假設，對整個網站的唯一內容如下<div>：

<div style="margin: auto; position:relative; align:center; top:0px; width:760px; height:415px; background-color:#000000">

我的問題是，我不能在所有Android設備上提出「一刀切」的擴展解決方案，我自己承擔的所有工作都很好。

我試過這三個不同的設備，一個平板電腦和兩個電話，並在<div>層的左側，右側和底部有一個很大的差距。看起來760像素的寬度在每個設備上都有大約50px的差距，每個設備上都有相同的底部差距，我所要做的就是擴大範圍，以便大致填滿所有設備上的屏幕。

我的電話說，它得到了854 window.innerWidth與1.5 window.devicePixelRatio，如果我更改初始和最大規模1.12 <div>層適合幾乎完美我的設備上。該表說它有window.innerWidth爲980,window.devicePixelRatio爲1.0，似乎喜歡約1.27的比例。我不知道第三個設備的細節，但是使用1.1似乎可以做到這一點。

當然，改變初始縮放並不是一個解決方案，甚至嘗試它會是一個完整的惡夢，所以，手指交叉，誰能告訴我，我失蹤，會使這項工作的盲目顯而易見的事情？或者我只是要求不可能自動將視圖縮放到固定尺寸<div>？

來源

2011-12-22 Mister B

對......在回家的路上，我被困在一個果醬中，並且有一個快樂的好想法，我得出結論，我大大超過了這個問題。

這是粗糙，但它的工作，我從網站上移除了元標記，已將此添加到應用程序：

// Set up up the scaling value 
float scaling = 100; 
int display_width; 
DisplayMetrics dm = new DisplayMetrics(); 
getWindowManager().getDefaultDisplay().getMetrics(dm); 
display_width = dm.widthPixels; 
scaling = (((float)display_width/760)*100); // 760 here is my container div width 
scaling = (int) Math.floor(scaling); 
// Set up the webview and apply the scale value 
webview = (WebView) findViewById(R.id.webview); 
webview.setInitialScale((int)scaling);

這工作得很好，但因爲我發了這個帖子我也遇到兩個問題。

首先是通過去除元標記我似乎已經刪除我的最大/最小規模的限制，這意味着，點擊其顯示Android鍵盤將導致縮放變化的任何<INPUT>元件上。幸運的是，添加此行的代碼解決了這個問題至今：

webview.getSettings().setDefaultZoom(ZoomDensity.FAR);

第二，我沒有一個可行的解決方案，是一些設備，如平板電腦Archos101，有軟件按鈕，而不是硬件鈕釦。此處的縮放代碼將縮放至設備寬度，這意味着該網站位於軟件按鈕下方......目前正考慮基於READ_PHONE_STATE實施解決方案，或者選擇添加退出應用程序而無需硬件按鈕並將其添加到清單中的功能：

<uses-permission android:name="archos.permission.FULLSCREEN.FULL" />

希望別人會發現這一點，並保存一段時間。

來源

2011-12-23 09:30:57

歡迎來到Stack Overflow！只要你有能力，一定要把你的答案標記爲已接受，這樣其他人就會知道有解決方案。 – 2011-12-23 10:47:20

謝謝喬納森！我已經編輯了我的問題和答案，應該向任何碰到它的人提供他們需要的所有東西，以便在幾乎所有設備上都可以使用簡單的.apk webview包裝器來獲得面向風景的固定寬度網站。 – 2012-01-03 11:18:44

通過WebView正確縮放Android設備上的網站

回答

相關問題