Question

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

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

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

我的具体问题是在Manifest文件中设置 android：screenOrientation =＆＃34; landscape＆＃34; 会使应用程序立即崩溃。我的猜测是它与我的主要布局文件交互得很糟糕，但我无法弄清楚如何。我在三星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％的屏幕尺寸。有什么想法吗？我提前谢谢了！

Answer 1

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

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

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

1 个答案: