3

ウェブページを 720*1200 モバイル デバイスに最適化しようとしています: マイ ページ

320*480 および 480*800 デバイスでは完全に機能しますが、720*1200 デバイスでは機能しません。レイアウト ビューポートが 720*1030 で、ビジュアル ビューポートが 360*515 になるように、ページは拡大されて読み込まれます。

ビューポート タグを設定しましたが、効果がありません。

<meta name="viewport" content="width=device-width,user-scalable=false" />
<title>teeg bejelentkezes</title>
<link rel="stylesheet" type="text/css" media="only screen and (min-device-width:720px)" href="css/style-720.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:719px) and (max-width:719px) and (min-device-width:480px) and (min-width:480px)" href="css/style.css" /> 
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:479px) and (max-width:479px)" href="css/style-320.css" />

助けてくれてありがとう！

4

3 に答える 3

2

おすすめ：

  • メディアクエリでmin-widthおよびを使用します。max-width
  • min-device-widthおよびの使用は避けてくださいmax-device-width。

ビューポートメタタグ：

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

minimum-scale、、maximum-scaleまたはuser-scalable必要に応じて追加します。

メディアクエリ：

<link rel="stylesheet" type="text/css"
      media="only screen and (min-width:720px)"
      href="css/style-720.css" />

<link rel="stylesheet" type="text/css"
      media="only screen and (min-width:480px) and (max-width:719px)"
      href="css/style.css" /> 

<link rel="stylesheet" type="text/css"
      media="only screen and (max-width:479px)"
      href="css/style-320.css" />

説明：

min-widthおよびよりもmax-width操作が簡単です。4つすべてを使用すると、2つの値のセットが常に一致するとは限らないため、場合によっては適用されないメディアクエリが発生する可能性があります。min-device-widthmax-device-width

iOSデバイスでは、向きに関係なく、横向きモードで幅にmin-device-width作用し、現在の向きの幅に作用します。max-device-widthmin-widthmax-width

また、Androidデバイスでは、は物理ピクセルに対応し、とmin-device-widthはディップ（デバイスに依存しないピクセル）に対応します。これにより、さまざまなピクセル密度のデバイスでの作業が容易になります。max-device-widthmin-widthmax-width

アダプティブコンテンツレスポンシブデザインの最良の例であるボストングローブは、ほぼ完全にmin-widthとで動作しmax-widthます。

于 2012-07-15T05:08:59.593 に答える
0

回答ありがとうございます。Matt Coughlin の提案を試してみましたが、AVD (720*1280) には 720 ではなく 480px の CSS が含まれていました。最終的にアプローチを切り替え、デザインをレスポンシブに変更しました。RWD と例

于 2012-07-24T10:51:57.953 に答える
0

これらを試してください：

width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0
于 2012-07-10T13:47:36.870 に答える