2

別のスタイル シートを使用して初めてのモバイル Web サイトを作成しようとしていますが、予想よりも複雑であることに気付きました。iPhone 4S と妻の Android の両方をテストすると、すべてがまったく異なります。Facebook のモバイル サイトのようにするには、何を使用すればよいですか? ズームインまたはズームアウトできず、すべてが画面に収まる場所はありますか?

4

2 に答える 2

1

ページをズームする必要がないことを確認するにmetaは、HTML に次のタグを追加します。

<meta name="viewport"
 content="width=device-width, initial-scale=1.0;
 maximum-scale=1.0; user-scalable=0"></meta>

次のことを行います。

  • ビューポートの幅はデバイスの幅に合わせて調整されます ( width=device-width)
  • 初期スケールと最大スケールは に設定されています1.0
  • ユーザースケーリング (ズーム) が無効になっています

モバイル デバイス、タブレット、デスクトップ デバイスで Web サイトをスムーズに動作させる方法を探している場合、キーワードはレスポンシブ デザイン(またはレスポンシブ Web デザイン) です。開始するには、A List Apart に関するこの記事をお読みください。また、非常に人気のある (非常に Facebook に似た) レスポンシブ レイアウトについては、Twitter Bootstrapを参照してください。モバイル向けに高度に最適化された UI コンポーネントについては、 jQuery Mobileを検討することを強くお勧めします。

于 2012-06-20T21:21:37.807 に答える
0

Safari Developer Libraryにある Apple のドキュメントを参照してください。基本的に、metaタグを使用して、Web サイトがモバイル対応であることをブラウザーに伝える必要があります。これらのタグを使用して、ピンチ ズーム スタイルなどをカスタマイズすることもできます。

具体的には、

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />

おそらく、Safari 開発者ライブラリで説明されていることのいくつかは iOS デバイスでのみ動作することに注意してください。ただし、上記のコードは iOS だけでなく Android でも動作するはずです。

于 2012-06-20T21:22:28.807 に答える