Лучший способ динамического масштабирования страницы?

Question

Мне было интересно, что вы, ребята и девчонки, порекомендуете, как наиболее эффективный способ динамически изменить масштаб сайта на основе разрешения?

Есть ли что-нибудь, что изменяет масштаб элементов и изображений? Или мне нужно сделать это отдельно? Я пытался использовать проценты и их, но это похоже на огромные хлопоты. Есть ли сценарии? Я долго искал и не нашел ничего подходящего.

Answer 1

Новый Медиа-запросы находятся в спецификации CSS3.Вы можете прочитать удивительную статью по теме из A List Apart Magazine (с пример , попробуйте изменитьокно вашего браузера)

Существуют также сценарии конечно.

Answer 2

Лучший способ определить ориентацию устройства - использовать метатеги.Метатег viewport используется Safari / chrome на iPhone и iPad для определения способа отображения веб-страницы.Ниже приведены свойства области просмотра

Ширина области просмотра по ширине устройства путем добавления следующего объявления в заголовок вашего HTML-файла

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

Чтобы установить начальный масштаб на 1,0добавьте это в заголовок вашего HTML-файла:

 <meta name="viewport" content="initial-scale=1.0">

Чтобы установить начальный масштаб и отключить пользовательское масштабирование, добавьте это в заголовок вашего HTML-файла:

Используйте метатег viewport для улучшения представления вашего мобильного браузера.Этот метатег устанавливает ширину и начальный масштаб области просмотра.Добавьте соответствующие метаданные области просмотра в заголовок документа, чтобы дать браузеру указание представить контент в максимально широком контексте на экране устройства.Если вы не установите ширину области просмотра, страница будет уменьшена при первой загрузке.

Полноэкранный режим

<meta name="apple-mobile-web-app-capable" content="yes">

Если для содержимого установлено значение yes, веб-приложение запускаетсяв полноэкранном режиме;в противном случае это не так.Вы можете определить, отображается ли веб-страница в полноэкранном режиме, используя логическое свойство JavaScript window.navigator.standalone только для чтения.