1

デバイスに基づいてビューポートのズーム (初期スケール) を調整したいと思います。タブレットではズームを大きくし、携帯電話のポートレート モードではズームを小さくします。

index.html でズームを制御でき<meta name="viewport"...ますが、それは各デバイスに固有のものではありません。

@media クエリを介してズームを制御する方法はありませんか??

それらは効果がないようです。

私は次のcssを持っています:

@media (min-width: 320px) {
  @viewport {
    width: device-width;
    zoom: 0.7;
  }
}

@media (min-width: 480px) {
  @viewport {
    width: device-width;
    zoom: 0.8;
  }
}

@media (min-width: 801px) {
  @viewport {
    width: device-width;
    zoom: 1.0;
  }
}

私の理解では、1 つ目 (320px) はスマートフォンの縦向きモード、2 つ目はタブレットの縦向きモード、3 つ目はタブレットの横向きモードである必要があります。

どちらの場合でも、結果は変わりません。

Samsung Galaxy Tab E と htc M8 One 電話でテストしています。

どんな洞察も高く評価されます。

ありがとう。

4

1 に答える 1

0

ほとんどのブラウザーではまだサポートされていないと思います@viewport。初期定義状態のワーキング ドラフト仕様です。

それが役立つかどうかはわかりませんが、ズームなしでズームを使用できます@viewport

@media (min-width: 320px) {
  * { zoom: 0.7;}
}

@media (min-width: 480px) {
  * { zoom: 0.8; }
}

@media (min-width: 801px) {
   * { zoom: 1.0;}      
}

これは私がテストに使用したフィドルです: https://jsfiddle.net/hw0xa1x8/1/@viewport (サポートされている場合、テキストの色は灰色になることに注意してください)

于 2016-04-13T08:44:47.933 に答える