通过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设备上的网站

回答

相关问题