@mediaクエリと@viewport zoom

Question

このデバイスに基づいてビューポートのズーム（初期スケール）を調整したい - タブレットでのズームの拡大、携帯電話のポートレートモードでのズームの縮小

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

@mediaクエリでズームを制御する方法はありませんか？

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

Iは、次の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; 
    } 
} 

私の理解は、最初の（320ピクセル）、電話ポートレートモードであるべきで、第二は、タブレットポートレートモードであるべきであり、第三は、錠剤の風景であるべきであるということです。

どちらの場合も、結果は変更されません。

私はSamsung Galaxy Tab Eとhtc M8 One phoneでテストしています。

何か洞察がありがとうございます。

ありがとうございました。

Answer 1

私は@viewportがまだほとんどのブラウザでサポートされていないと思っています。初期定義状態のWorking Draft仕様です。

ないことができますかどうかわからしかし、あなたはまだ@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がサポートされている場合は、テキストの色がグレーとなりますことに注意してください）