2

これに対する比較的簡単な修正があることを願っています。すべてのブラウザーで期待どおりに表示されるクライアント用の単純な Web サイトを作成しました。プロジェクト用に別のモバイル サイトを開発することは作業の範囲には含まれていませんでしたが、最新のモバイル ブラウザーで Web サイトが正しく表示されることを期待していました。現在、iPhone 4 では、幅 1000 ピクセルのコンテナーの左側が切り取られており (おそらく 10 ピクセル)、左にスクロールしてまったく表示できません。これは CSS の問題なのか、ズームの問題なのか疑問に思っています。サイトはここからアクセスできます。

この問題に関連するリソースを見つけるのに苦労しましたが、次のスニペットを見つけました。

<meta name="viewport" content="width=device-width; initial-scale=0.9;">

これは回避策の始まりでしょうか? サイトがデフォルトのズーム、たとえば 75% で読み込まれると嬉しいのですが、モバイル デバイス用のコーディングの経験はありません。

4

3 に答える 3

4

したがって、私の特定のケースでは、機能する解決策を見つけました。うまくいけば、これは同様の状況にある他の人に役立つでしょう.

実際、キーはビューポートのメタタグにありました。コンテンツが中央の 1000px x 600px コンテナーに制限されている Web ページで作業しています。 この記事は、これを理解するのに非常に役立ちました。

記事に記載されているように、「デフォルトでは、iPhone の Safari は、Web コンテンツ用に 980 ピクセル幅を使用できる大画面のデスクトップ ブラウザーであるかのようにページをレンダリングします。次に、コンテンツが収まるように縮小します。小さな画面。」

私の場合、1000 ピクセルの固定幅では、左から 20 ピクセルが切り取られ、そこにパンすることができませんでした。トリックは、カスタムの幅 (および必要に応じて高さ) を設定することです。縦向きと横向きの iPhone の両方でサイトを確認してください。このメタタグで使用できるパラメーターは他にもありますが、ここでは単純にしています。

<head></head>これは、サイトのタグの間に含めたコードです。

<meta name="viewport" content="width=1050px, height=650px" />

これにより、サイトのコンテンツの周りに 25 ピクセルの白い境界線が表示され、ズームなども可能になります。これは iPhone 固有の Web サイトの代わりにはなりませんが、ユーザーがサイトのすべてのコンテンツにアクセスできるようにします。

お役に立てれば！

于 2012-05-26T19:35:31.000 に答える
2

初期スケールを削除してみてください。

<meta name="viewport" content="width=device-width;">
于 2012-05-25T14:32:02.233 に答える
1

モバイル ビュー用に CSS を変更したい場合は、adapt.jsという名前のツールがあります。画面解像度に関連するスタイルシートを選択します。

于 2012-05-25T14:30:47.600 に答える