@media запросы и @viewport zoom

Question

Я хотел бы настроить масштаб видового экрана (начальный масштаб) в зависимости от устройства - больший зум на планшетах и ​​меньший зум в портретных режимах телефона.

Я могу управлять масштабированием с помощью <meta name="viewport"... в index.html, но это не характерно для каждого устройства.

Разве нет способа управлять масштабированием с помощью запросов @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;
  }
}

Насколько я понимаю, первый (320px) должен быть в режиме портрета телефона, второй - в режиме портрета планшета, а третий - в альбомной ориентации.

В любом случае результат не изменяется.

Я тестирую на Samsung Galaxy Tab E и HTC M8 One телефон.

Любые идеи приветствуются.

Благодарю.

Answer 1

Я думаю @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 поддерживается цвет текста, в результате серый)