0

私はプログラミングが初めてで、「HTML5 for iOS and Android - A Beginner's Guide」( http://html5formobile.com/ ) という本を使用して、HTML/JavaScript Web ページの作成の基本を教えています。次に、本に付属のラッパーに入れ、ページを Android アプリとして機能させます。

私が抱えている問題は、純粋に JavaScript を使用して、テキストを画面の水平方向の中央に揃えようとしていることです。私が書いたコードは、Chrome または IE を使用してデスクトップ PC で表示すると正しく機能しますが、ラッパーに配置して電話でアプリとして表示したり、電話で表示されるスタンドアロンの Web ページとして表示したりすると、正しく機能しません。これを行うために作成した小さなコードは次のとおりです。

<script>
    instruction_text_element = document.createElement("text");
    instruction_text_node = document.createTextNode('This text should be aligned to the horizontal center of the screen.');
    instruction_text_element.appendChild(instruction_text_node);
    document.body.appendChild(instruction_text_element);
    instruction_text_element.style.position = 'absolute';
    instruction_text_element.style.left = ((screen.width / 2) - (instruction_text_element.offsetWidth / 2)) + 'px';
</script>

このコードでは、画面の中間点を計算し、そこからテキスト要素の幅の半分を引いて、テキスト要素を配置する左の位置を作成します。テキスト。前述のように、Chrome または IE を使用してデスクトップ PC で表示すると、これは正常に機能します。ただし、アプリ ラッパーに配置して、実際の電話または PC の仮想電話で表示したり、実際に電話でプレーンな Web ページを表示したりすると、テキストが正しい中央位置に表示されません。画面の左側に表示されすぎている場合は、約 25% 左側にずれていると言えます。これは、テキストの両側の余白が 50/50 である必要があることを意味しますが、25/75 のように表示されています。

なぜこれが起こっているのか誰にも教えてもらえますか？私のコードはおそらくテキストの作成と配置に最適な方法ではないことを理解していますが、プログラミングと基本の学習を始めたばかりなので、この PC とモバイルの不一致がコードのどこで発生しているかを知りたいと思っています。プログラミングについてもっと学ぶにつれて、将来それを避けることができるように。

あなたが提供できるどんな助けにも感謝します!

乾杯！

更新しました：

emrys57 の提案に従って、次の例を試して、電話が画面幅に関して混乱しているかどうかを確認しました。

<body>
<div id="div_id", style="width: 100px; background:#00CC33; text-align: center;">!</div>

<script>
document.getElementById("div_id").style.position = 'absolute';
document.getElementById("div_id").style.left = (window.innerWidth / 2) + 'px';
</script>

</body>

繰り返しますが、これは私のデスクトップ PC では問題なく動作しますが、携帯電話では小さな緑色の div ボックスが画面の左側に表示されすぎています。screen.width を window.innerWidth に交換しようとしましたが、同じ結果が得られます。それを window.outerWidth に交換すると、ボックスが左にさらに遠くに表示されます。

電話の画面を確実に測定する方法を知っている人はいますか?

乾杯！

4

1 に答える 1

0

同様のトリックを試してみたところ、一部の電話とブラウザーの組み合わせ、特に古いものでは、画面サイズに奇妙な値が表示されることがわかりました。iOS はほぼ予測可能のように見えますが、Android はそうではありませんでした。これを確認するには、左端が画面の中央にある固定サイズの小さな div を配置してみてください。

little_box.style.left = (screen.width / 2) + 'px';

そして定規で測ります。真ん中にない場合は、電話が画面サイズで混乱していることがわかります。

この問題を克服するために、横方向のサイズを % で使用します。すべての電話は、その意味をよく理解しているようです width: 50%; 。

テキストを div に配置することで、テキストをより簡単に中央に揃えることができます。

<div style="width: 100%; text-align: center;">!</div>

それか "！" 画面中央に表示されるはずです。

于 2013-09-20T10:37:26.433 に答える