在通过的WebView Android设备一个网站的正确比例 [英] Proper scaling of a web site on Android devices via WebView
问题描述
我的应用程序是一个简单的的WebView 包装，在一个固定的横向显示网页，页面有一个居中的div是760px宽415px高这应显示比例上的所有设备，因此（大约）适应屏幕，用户不能更改比例......我的几乎的把一切都从比例分开工作。
My application is a simple WebView "wrapper" that displays a web page in a fixed landscape orientation, the page has a centered div that is 760px wide and 415px high and this should be displayed scaled on all devices so it (roughly) fits the screen, the user cannot change the scaling... I've almost got everything working apart from the scaling.
我在页面上的以下视窗meta标签：
I have the following viewport meta tag on the page :
<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并添加另一条线路清单但是这再没差什么：
I should mention that originally the .apk target was Android 2.2 and I've recently changed up to 2.3.1 and added another line to the manifest but that's made no difference to anything :
android:xlargeScreens="true"
我添加了以下到的.java code：
webview.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webview.setScrollbarFadingEnabled(false);
webview.getSettings().setSupportZoom(false);
webview.getSettings().setBuiltInZoomControls(false);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
有关这个问题的目的只是假设，整个网站的唯一内容如下＆LT; DIV＆GT; ：
For the purpose of this question just assume that the only content on the entire site is the following <div>:
<div style="margin: auto; position:relative; align:center; top:0px; width:760px; height:415px; background-color:#000000">
我的问题是我不来可以了一个尺寸适合所有人的比例在所有Android设备的解决方案，其他的一切我自己负责与提供优良工程。
My problem is I can't to come up with a "one-size-fits-all" scaling solution across all Android devices, everything else I've tasked myself with delivering works fine.
我已经试过这三种不同的设备，一个平板电脑和两部手机，还有相当大的差距在左侧，右侧和底部的＆LT的; DIV＆GT; 层。它看起来像760px宽度对两侧约50像素的另一个差距，并在每个设备的下面一样，我想要做的就是规模，高达所以它大致填满屏幕上的所有设备。
I've tried this on three different devices, one tablet and two phones, and there is a large gap on the left, right and bottom of the <div> layer. It looks like the 760px width has about another 50px gap on either side and the same underneath on each of the devices, all I want to do is scale that up so it roughly fills the screen on all of the devices.
我的手机说，它有一个 window.innerWidth 854 1.5，并且如果 window.devicePixelRatio 我更改初始和最大规模1.12 ＆LT; DIV＆GT; 层适合几乎完美我的设备上。该表说，它有一个 window.innerWidth 980用 window.devicePixelRatio 1.0，似乎像一个秤大约1.27。我不知道第三个设备的细节，但使用1.1似乎做的伎俩。
My phone says it's got a window.innerWidth of 854 with a window.devicePixelRatio of 1.5 and if I change the initial and maximum scale to 1.12 the <div> layer fits just about perfectly on my device. The table says it's got a window.innerWidth of 980 with a window.devicePixelRatio of 1.0 and seems to like a scale of around 1.27. I don't know the details of the third device but using 1.1 seem to do the trick on that.
当然，改变初始比例是不是一个解决办法，甚至试图将是一个完整的噩梦的话，手指交叉，任何人都可以告诉我，我错过了就会使这项工作的言自明的事情吗？还是我只是要求不可能自动缩放视图以一个固定大小的＆LT; DIV＆GT;
Of course changing the initial scaling isn't a solution and even attempting it would be a complete nightmare so, fingers crossed, can anyone tell me the blindingly obvious thing that I'm missing that'll make this work? Or am I just asking the impossible to automatically scale the view to a fixed size <div>?
推荐答案
右键...在回家的路上我被卡在一个果酱和了一顿挺不错想，我得出的结论，我是大大过度思考这一问题。
Right... On the way home I was stuck in a jam and had a jolly good think, I came to the conclusion that I was dramatically over-thinking this problem.
这是粗糙，但它的工作，我从网站上移除的meta标签，并已将此添加到应用程序：
This is rough but it does the job, I removed the meta tag from the site and added this to the application :
// 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);
这工作得很好，但因为我发这个帖子我也遇到了两个问题。
That works quite well but I have encountered two issues since I made this post.
首先是通过去除meta标签我似乎已经打消了我的最大/最小规模限制，这意味着，单击任何＆LT上;输入＆GT; 元素其中显示Android键盘将导致缩放的变化。幸运的是，添加此行到code解决了这个问题至今：
The first is that by removing the meta tag I seem to have removed my limitation on the maximum/minimum scale, this means that clicking on any <INPUT> element which displays the Android keyboard will result in a change in the scaling. Luckily, adding this line to the code solves this issue so far :
webview.getSettings().setDefaultZoom(ZoomDensity.FAR);
第二，我没有一个可行的解决方案，是一些设备，如平板电脑Archos101，有软件按钮，而不是硬件按钮。缩放$ C $其中，C将扩展到设备的宽度，这意味着该网站去下的软件按钮。目前考虑实施解决方案基于 READ_PHONE_STATE 或可选添加退出应用程序没有硬件按钮的能力，并增加这清单：
The second I don't have a workable solution for and is that some devices, such as the Archos101 tablet, have software buttons instead of hardware buttons. The scaling code here will scale to the device width and that means the site goes underneath the software buttons... Currently thinking about implementing a solution based on READ_PHONE_STATE or optionally adding the ability to quit the application without hardware buttons and adding this to the manifest :
<uses-permission android:name="archos.permission.FULLSCREEN.FULL" />
希望别人会发现这和自救一些时间。
Hopefully someone else will find this and save themselves some time.
这篇关于在通过的WebView Android设备一个网站的正确比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
