Отзывчивая веб-страница без метатега?

Question

Я предполагаю, что ответ отрицательный, но есть ли надежный способ сделать веб-страницу отзывчивой без добавления мета-тега viewport к заголовку?

Я добавил контейнер формы входа шириной 400 пикселей и центрировалвертикально и горизонтально.На настольных компьютерах это выглядит хорошо, но оно уменьшено и выглядит крошечным при доступе к странице на мобильном телефоне.Пользователи должны несколько раз провести пальцем, чтобы увеличить масштаб, чтобы они могли использовать форму входа.

У меня нет доступа к голове.Я могу только создать контейнер внутри тела.Тем не менее, я могу добавить CSS для чего угодно и базовый JavaScript.У меня ограниченный доступ, потому что веб-страница создается серверной программой.Это позволяет только добавить CSS-файл и HTML-файлы верхнего и нижнего колонтитула.По сути, это ограничивает меня упаковкой контейнера формы и ошибок в пользовательский контейнер.

Answer 1

Вы можете использовать JavaScript для программирования своего собственного адаптивного поведения.Простым примером может быть масштабирование html-контейнера по плотности пикселей устройств.

"window.devicePixelRatio" дает вам фактическое количество пикселей на пиксель css.Затем масштабируйте ваш контейнер по нему:

const pixelDensity = window.devicePixelRatio;
document.getElementById("container").style.transform = "scale("+pixelDensity+")";

Css медиа-запросы могут работать неправильно, но опять же вы можете использовать javascript для динамической загрузки стилей на основе скорректированного размера экрана при умножении на pixelDensity выше.

Answer 2

С первого взгляда (на Могу ли я изменить метатег viewport в мобильном сафари на лету? например) кажется, что вы действительно можете создать и внедрить соответствующий метатег с помощью JavaScript, например:

<script>
(function(){
var m = document.createElement('meta');
m.setAttribute('name','viewport');
m.setAttribute('content','width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0');
document.head.appendChild(m);
})()
</script>

Тестовая страница : перед тем, как нажать на кнопку, выполняющую вышеуказанную функцию, вы должны увидеть широко переполненный темный абзац.После этого абзац должен войти в область просмотра.

Answer 3

Вы можете создавать адаптивные веб-сайты, используя правило CSS @media.

Медиа-запросы позволяют применять определенный стиль CSS в зависимости от типа устройства и характеристик.Рассмотрим следующий код, например:

body {
  background-color: yellow;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: blue;
  }
}

Этот код приведет к тому, что цвет фона вашей страницы станет синим, пока ширина экрана не станет <= 600px.

Прочитайте это MDNстатья для более подробного объяснения медиазапросов.

Answer 4

Вы можете сделать это с помощью JavaScript, но его можно применить только после загрузки страницы, поэтому в вашем случае это бесполезно ...