Начальная шкала, медиа-запросы

Question

У меня есть родной мобильный сайт, который должен работать с разными размерами видовых экранов, но вместо изменения атрибутов со средствами массовой информации я хочу только изменить начальный масштаб веб-сайта. Как изменить начальную шкалу для разных размеров видовых экранов? Работает с медиа-запросами?

Answer 1

Вы можете сделать это с помощью JavaScript, я сделал что-то подобное, как это:

if (document.documentElement.clientWidth < 480) { 
      document 
       .querySelector("meta[name=viewport]") 
       .setAttribute('content', 'initial-scale=0.4', 'maximum-scale=0.4', 'width=768'); 
     }; 

Это для сайта, который предназначен для IPad, но я хочу, чтобы масштабировать для iPhone'ов и т.д ..

Answer 2

Вероятно, наиболее распространенный способ установки «начальный масштаб» является инструктируя браузер использовать ширину устройства, как ширина окна просмотра:

<meta name="viewport" content="width=device-width" /> 

в Foll ow на ваши вторичные запросы, да, это, очевидно, хорошо работает с различными размерами видовых экранов, устанавливая ширину окна просмотра по отношению к ширине устройства и совместим со средствами массовой информации.

В данной статье приводится подробная информация: http://tech.bluesmoon.info/2011/01/device-width-and-how-not-to-hate-your.html