强制横向时Android应用程序（嵌入式WebView）崩溃

Posted 2023-03-25

【中文标题】强制横向时Android应用程序（嵌入式WebView）崩溃

【英文标题】：Android app (embedded WebView) crashes when forcing landscape orientation

【发布时间】：2017-11-28 18:12:28

【问题描述】：

我有一个 html5 应用程序，几乎所有这些都在 Canvas 中进行。在 JS 中，我为画布的高度和宽度设置了精确的尺寸。我还使用了很多带有幻数的绝对定位来使布局完美。注意：一切都是围绕横向设计的，纵向不是一个选项。

在现代版本的 Chrome 中运行它，一切正常 - Chrome 似乎在页面加载时正确缩放画布（无论视口大小），并且绝对定位的画布绘图/HTML 元素的位置相应地缩放。

但现在我正试图用一个 android 应用来完成同样的事情 - 非常简单的应用，它只加载一个 WebView，没有任何包含它的东西。画布比手机的分辨率小得多，所以我想这应该可以。

我的具体问题是在 Manifest 文件中设置 android:screenOrientation="landscape" 总是会使应用程序立即崩溃。我的猜测是它与我的主布局文件的交互很糟糕，但我不知道如何。我正在三星 Galaxy S6 上进行测试，并将应用程序构建到 SDK 版本 21。

我想要的是像在桌面 Chrome 浏览器中一样的行为，但我似乎找不到一种方法，要么无法显示整个 HTML5 画布，要么立即使应用程序崩溃。

这是我用来定位画布的 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）居中。 p>

我想要的是一种更改 HTML/JS 或 Android 项目配置以实现相同目的的方法。理想的情况是我可以让 WebView 自动缩放到屏幕大小的 90%。有什么想法吗？提前致谢！

【参考方案1】：

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

缩放和偏移存在一些问题，可以通过调整 WebView 的缩放和边距属性轻松解决（同样使用幻数，但我确信任何设备的正确值都可以是在onCreate()中计算和设置。