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

Question

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

我在页面上有以下视口(viewport)元标记:

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

WebView 的 list wrapper .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 并在 list 中添加了另一行，但这对任何事情都没有影响:

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 似乎可以解决这个问题。

当然，更改初始缩放比例不是解决方案，即使尝试这样做也将是一场彻头彻尾的噩梦，所以，祈祷吧，谁能告诉我我遗漏的非常明显的事情，这将使这项工作成功吗？或者我只是在问不可能自动将 View 缩放到固定大小 <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);  

效果很好，但自从我发表这篇文章以来，我遇到了两个问题。

首先，通过删除元标记，我似乎已经删除了对最大/最小比例的限制，这意味着单击任何 <INPUT>显示 Android 键盘的元素将导致缩放比例发生变化。幸运的是，将这一行添加到代码中到目前为止解决了这个问题:

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

第二个我没有可行的解决方案，某些设备(例如 Archos101 平板电脑)具有软件按钮而不是硬件按钮。这里的缩放代码将缩放到设备宽度，这意味着网站位于软件按钮下方......目前正在考虑实现基于 READ_PHONE_STATE 的解决方案。或者有选择地添加无需硬件按钮即可退出应用程序的功能，并将其添加到 list 中:

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

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