0

ほとんどすべてがCanvasで行われるHTML5アプリがあります。 JSでは、キャンバスの高さと幅の正確な寸法を設定しました。私はレイアウトを完璧にするために、マジックナンバーで絶対的な位置付けをたくさん使用しました。注:すべては横向きの向きを基準に設計されており、縦長の写真はオプションではありません。横向きの向きを強制すると、Androidアプリ(埋め込みWebView)がクラッシュする

現代版のChromeでこれを実行すると、すべてがうまくいきます - ページが読み込まれたとき(ビューポートのサイズに関係なく)にキャンバスが適切に拡大/縮小され、

しかし、私はAndroidアプリで同じことを達成しようとしています - それは何も含まれていないWebViewをロードする非常に単純なアプリです。キャンバスは電話の解像度よりはるかに小さいので、これはうまくいくはずです。マニフェストファイルにscreenOrientation =「風景」常にすぐにアプリがクラッシュします:

私の具体的な問題はアンドロイドを設定するということです。私の推測では、それは私のメインのレイアウトファイルとうまくやりとりしているということですが、私はどのように考え出すことができません。私はSamsung Galaxy S6でテストを行い、SDKバージョン21にアプリケーションをビルドしています。

私が望むのは、デスクトップのChromeブラウザに表示されるような動作ですが、 HTML5 Canvas全体の表示に失敗したり、すぐにアプリをクラッシュさせたりします。

私はキャンバスを配置するために使用しています(デスクトップ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%と言うように自動的に拡大することができるということです。何かご意見は?事前に感謝します!

答えて

0

答えが見つかりました。私はそれがマニフェストオリエンテーション=風景プロパティを使用して動作させることができなかったが、setRequestedOrientation()内のonCreate()を使用すると、完璧に動作WebViewの寸法を、JSがCanvas要素を設定する正確なサイズに設定する必要がありました。

あり規模を持ついくつかの問題があっ及びオフセット、簡単に(再びマジックナンバーとWebViewのの規模やマージンのプロパティを調整することで解決しますが、私は、任意のデバイスのための右の値が計算さに設定することができます確信していますonCreate()

関連する問題