0

この例のように、テキストに対して中央に配置し、ビューポートの上部に固定する必要があるページの上部にロゴがあります: http://dev.markbrouwers.nl/test.html

<h1 style="width: 200px; height: 100px; margin: 0 auto;">
    <img src="images/logoforeground.png" style="position: fixed; display: block;" alt="Page title">
</h1>
<div style="width: 800px; margin: 0 auto;">
    <p>content</p>
</div>

それはPC上で完全に動作します。しかし、モバイル ブラウザでズームすると、ロゴが中心からずれ始めます。私はiOSで固定された位置についてかなりのこと（例えばこれ）を読んだことがありますが、明らかにiOS 5とAndroid 2.2の時点では動作するはずですが、そうではないと思っていました...まだドリフトしています...モバイルの作り方を知っている人はいますかwebkit は PC ブラウザのように動作しますか?

[編集]

HTMLを少し編集したところ、h1がコンテナの外に出ました

また、iPhone と Windows でスクリーンショットを作成しました。ご覧のとおり、iOS でズームインすると、ロゴがビューポートから外れます。クロム ブラウザでは、ビューポートの上部中央にとどまります。

Safari/iOS5 のスクリーンショット: ここに画像の説明を入力

Chrome/Win7 のスクリーンショット: ここに画像の説明を入力

4

1 に答える 1

0

これが発生する理由は、ページの幅が 340px であっても、モバイル デバイスがページの幅を知る必要があるためです。たとえば、この問題が引き続き発生します。サイズ変更ではなくズームが原因です。

ユーザーのテキストを大きくしたい場合、最善の解決策は次のようなものです。

2つボタン 小・大

次に、これらのボタンをJavaScriptにリンクして、必要に応じてテキストサイズを変更します。

たとえば、大きくクリックすると 24px になり、小さくクリックすると 14px になります。

シンプルなジャバスクリプトです

于 2012-11-14T01:30:35.640 に答える