通过 WebView 在 Android 设备上正确缩放网站

Question

我的应用程序是一个简单的WebView“包装器”，它以固定的横向显示网页，该页面有一个 760 像素宽和 415 像素高的居中 div，它应该在所有设备上按比例显示，所以它（大致）适合屏幕，用户无法更改缩放比例...除了缩放比例之外，我几乎一切正常。

我在页面上有以下视口元标记：

<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 像素的宽度在两侧还有大约 50 像素的间隙，并且在每个设备的下方都是相同的，我要做的就是将其放大，使其大致填满所有设备的屏幕。

我的手机说它的window.innerWidth 为 854，window.devicePixelRatio 为 1.5，如果我将初始和最大比例更改为 1.12，<div> 层几乎完全适合我的设备。该表显示它的 window.innerWidth 为 980，window.devicePixelRatio 为 1.0，并且似乎喜欢 1.27 左右的比例。我不知道第三个设备的详细信息，但使用 1.1 似乎可以解决问题。

当然，更改初始缩放不是一个解决方案，即使尝试它也将是一场彻头彻尾的噩梦，所以，祈祷，谁能告诉我我遗漏的显而易见的事情会让这项工作奏效吗？还是我只是在问不可能自动将视图缩放到固定大小<div>？

Answer 1

是的...在回家的路上，我陷入了困境，并有一个愉快的想法，我得出的结论是，我对这个问题的思考过度了。

这很粗糙，但它确实有效，我从网站上删除了元标记并将其添加到应用程序中：

// 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" />

希望其他人能找到这个并节省一些时间。