同じ画面解像度を持つ 2 つの異なる Android デバイス間のスケーリングで問題が発生しています。
私の最初のデバイスは「Nexus 7 タブレット」で、2 つ目は「Samsung Galaxy Note」です。両方のデバイスの画面解像度は 1280x800 であり、両方のデバイスで Web ページの表示が縦向きモードに強制されます (Dolphin Browser 経由)。Dolphin ブラウザは、「フル スクリーン」アドオンも使用します。
ページの読み込み時に画面サイズを適切にスケーリングする必要がある理由を説明するために、Eventghost で使用する TV Remote Control Web インターフェイスを構築しようとしています。「ビューポート」メタタグでサイズ変更を処理しようと格闘していましたが、適切に機能させることができないようです (Android 側で利用可能なすべてのドキュメントにもかかわらず)。
ビューポート メタ タグと CSS の組み合わせを使用してスケーリングを処理できること、および各デバイス サイズのエントリを追加するだけでよいことをアドバイスするページを見つけました (両方のデバイスが同じ画面を持っているので問題ありません)解像度）。テクニックを見つけたページは次のとおりです。
http://www.propublica.org/nerds/item/adaptive-design-fixed-widths-and-tablets
これを試した後、私の喜びに。Nexus 7 ではスケーリングが適切に機能していましたが、Galaxy Note を介して同じページを読み込んだときに、スケーリングが機能しませんでした (少し縮小しましたが、ページの約半分はまだ切り取られていました)。www.portvie.ws (上のページから)をロードして、各デバイスの画面サイズが表示されているかどうかを確認しました。両方とも 800x1280 でした。
使用されている HTML は次のとおりです。
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js"></script>
</head>
<body onLoad="StartUp()" background="Background.png">
<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td Width="200" Height="200" Background="A_HOMEBUTTON.png"></td>
<td Width="700" Height="200" Background="A_HOMESCREEN.png"></td>
<td Width="700" Height="200" Background="A_BLANK.png"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td Width="1600" Height="50"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td Width="1600" Height="2310" Background="B_HOMESCREEN.png"></td>
</tr>
</table>
</body>
</html>
スケーリングを処理するために使用している CSS は次のとおりです。
@media screen and (device-width: 800px) { html { zoom: 35%; } }
body
{
-webkit-user-select: none;
overflow: hidden;
}
この動作を理解するための助けをいただければ幸いです。