29

タブレット、デスクトップ、スマートフォン向けにウェブサイトを最適化するには、メディア クエリと Viewport メタ タグのどちらを使用するのが最適ですか? コードを参照してください：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

対

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
4

5 に答える 5

22

どちらも必要です。

メディア クエリは、さまざまなデバイスの if 条件のように、さまざまなデバイスにさまざまな css を持たせるために使用されます。

ビューポートメタ タグは、このタグに従って幅を取るようにデバイスに指示するように設定します。使用されていないデバイスがデフォルト設定に従ってレイアウトを調整する場合、デバイスのリセットのようなものです。

于 2012-07-16T18:31:15.810 に答える
12

更新：2020年から

ビューポートメタタグが必要になります（常に）

<meta name="viewport" content="width=device-width, initial-scale=1">

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

ほとんどの場合、いくつかの@mediaブレークポイント

しかし、多くの場合（最近）-人々は、@ mediaクエリを回避するために、パーセンテージ、可変/相対単位、フレックスボックス、および自動入力タイプのグリッド状況で物事を活用しようとします

これらすべてが連携して最良の結果を得ることができると思います。私は多くの理由で@mediaクエリが好きです。:)それらはすべて使用するための単なるツールです！目標に固執する-そして適切なツールが現れます。

これは、思考プロセス全体を紹介するビデオです。

そして、これが@mediaルールに関する記事です。

....。

（裏話の元の答え）

私はすべての状況が異なっていると言うでしょう...そしてそれは/または状況ではありません。あなたがそこに持っているビューポートメタタグは、ウェブサイトが1対1の比率を維持するようにするでしょう。これは多くの場合良いことです。ただし、ユーザーがスケーラブルに「いいえ」に設定されているため、ユーザーはズームインなどできなくなります。iPadやその他のデバイスがサイトを変更する方法が最適な場合もあります...（状況によって異なります）

私が見つけた最良の方法は、メディアクエリを使用し、2つの方向のいずれかを選択することです。

  1. 小さなものから始めて、積み上げていきます
  2. 大規模なものから始めて、構築していきます

ブラウザウィンドウをどんどん大きく（または小さくして小さく）伸ばしてから、Webサイトが醜くなったら（直前に）それが次のブレークポイントになります...そこでメディアクエリを実行します...そして繰り返します。すべてのデバイスサイズに注意を払わないでください---このようにして、新しいデバイスなどが出てきても、すべての可能なサイズで見栄えがするように設計されていることがわかります。（320未満になったとき/私はサイトを名刺に変えたい///スマートフォンなしで読みやすい情報を持っている方が良い...）

その後、このすべての後に...デバイスでテストし、さまざまなビューポートメタタグを試してください。

それについての素晴らしい記事がたくさんあります...「レスポンシブデザイン」または「適応型」または「RWD」レスポンシブウェブデザインのようなキーワードを使用してください。そして成功を祈る ！！！

于 2012-07-16T18:41:11.660 に答える
9

何を達成したいかによります。

デスクトップの解像度のみを考慮して設計し、モバイル ブラウザを「ズームアウト」してデスクトップのような解像度を想定する場合は、viewport メタ タグのみを使用して幅を固定値に設定できます。

真のレスポンシブ デザインが必要な場合は、ビューポート メタ タグをデバイス幅に設定し、メディア クエリを使用して、コードで示したようにさまざまな解像度のレイアウトを計画する必要があります。

于 2012-07-16T18:31:17.367 に答える