0

現在、私はレスポンシブ Web サイトを作成しています。私が現在抱えている問題は、レスポンシブ レイアウトのデザイン (私がデザインしたものではありません。私は単にデザインを実装しているだけです) の幅が 745px に固定されていることです。もちろん、これはほとんどのタブレットの幅ではありません。

たとえば、幅が 768px の iPad では、各辺に 10px の余白があります。それはそれほど素晴らしいものではなく、デザイナーが意図したものでもありません。

パーセンテージ値に頼らずに、モバイル/タブレット デバイスで Web サイトをアップスケールする方法はありますか? デザインのいくつかの部分は固定ピクセル値に依存しており、デザイン全体をパーセンテージ値に変換することは多かれ少なかれ不可能です。

たとえば、iPad で少し拡大すると、意図したとおりに表示されます。したがって、タブレット デバイスを強制的に 745 ピクセルの幅にズームしてから固定したままにするオプションがあれば、まさに私が必要としているものです。ただし、少しグーグルで調べた後、まだ何も見つかりませんでした。

CSS/HTML のみのソリューションが望ましいですが、JavaScript も問題ありません。

もう少し明確にするために：このソリューションのターゲットは、ポートレートモードのタブレットのみです。横向きのスマートフォンとタブレットはそのままにしてください。

4

2 に答える 2

2

対応するメディアクエリにズームを含めることができます。

transform:scale();(ブラウザプレフィックスに応じて) と for IE を使用するとzoom:<x>、次のようになります。

@your according media-query{
      -webkit-transform: scale(1.1);  /* Safari 3.1+, Chrome */ 
         -moz-transform: scale(1.1);  /* Firefox 3.5+ */
          -ms-transform: scale(1.1);  /* IE9+ */
           -o-transform: scale(1.1);  /* Opera 10.50+ */
              transform: scale(1.1);
                   zoom: 1.1;         /* old IEs*/
}

これはブラウザーでかなり適切にサポートされている必要があり、ユーザーが必要に応じてズームできないようにすることで UX を台無しにすることはありません (JavaScript ソリューションのように)。

どうやら、これには、対象デバイスのビューポートの正確な測定値に合うように、JavaScript の調整が必要になる場合があります。

于 2012-11-19T13:28:59.683 に答える
1

おそらく、メディア クエリを調査し、タブレット用に CSS を少し変更することをお勧めします: http://www.w3.org/TR/css3-mediaqueries/

于 2012-11-19T09:29:43.610 に答える