强制横向方向时,Android应用程序(嵌入式WebView)崩溃

时间:2017-06-25 21:08:30

标签: javascript android android-layout html5-canvas android-webview

我有一个HTML5应用程序,几乎所有这些都发生在Canvas中。在JS中,我设置了画布高度和宽度的精确尺寸。我还使用了大量的绝对定位和幻数来使布局更加完美。注意:一切都是围绕横向设计的,肖像不是一个选项。

在Chrome的现代版本中运行此功能,一切都运行良好 - Chrome似乎在页面加载时正确缩放画布(无论视口大小如何),以及绝对定位的画布绘制/ HTML元素'相应的职位比例。

但现在我尝试用Android应用程序完成同样的事情 - 非常简单的应用程序只加载 WebView ,而不包含任何内容。画布比手机的分辨率小得多,所以我想这应该有效。

我的具体问题是在Manifest文件中设置 android:screenOrientation =" landscape" 会使应用程序立即崩溃。我的猜测是它与我的主要布局文件交互得很糟糕,但我无法弄清楚如何。我在三星Galaxy S6上测试,并将应用程序构建到SDK版本21。

我想要的是我在桌面Chrome浏览器中的行为,但我似乎无法找到一种无法显示整个HTML5 Canvas或立即崩溃应用程序的方式。

这是我用来定位画布的JS,它(在桌面Chrome中)工作 - 注意 canvas#board 是画布元素。

<meta name='viewport' content='width=device-width, initial-scale=1'>

// some irrelevant code omitted...

var XRES  = 640;
var YRES  = 280;
var X_OFF = (window.innerWidth  - XRES) / 2;
var Y_OFF = (window.innerHeight - YRES) / 2;

// some irrelevant code omitted...

$('#board').css('left', X_OFF);
$('#board').css('top',  Y_OFF);
$('#submitDialog').css('left', X_OFF + 222);
$('#submitDialog').css('top',  Y_OFF +  41);

无论整个视口大小如何,这都会使画布在两个维度中居中,并将 submitDialog (最终用于提交高分的 div )居中。

我想要的是一种改变HTML / JS或Android项目配置以实现相同目标的方法。理想的是,我可以让WebView自动缩放到90%的屏幕尺寸。有什么想法吗?我提前谢谢了!

1 个答案:

答案 0 :(得分:0)

我找到了答案。我无法通过Manifest orientation = landscape 属性使其工作,但在 onCreate()中使用 setRequestedOrientation()可以很好地工作。我还必须将 WebView 尺寸设置为JS设置Canvas元素的确切尺寸。

缩放和偏移有一些问题,可以通过调整 WebView 的比例和边距属性轻松解决(再次使用幻数,但我确信任何设备的正确值都可以计算并在 onCreate()中设置。

相关问题