Определение размера HTML-контента в соответствии с окном, но не с адаптивным дизайном

Question

На многих хороших веб-сайтах я вижу, что страница загружается так, что содержимое имеет ту же ширину, что и браузер. В частности, на iPad: если вы поворачиваете экран после загрузки страницы и уменьшаете масштаб, кажется, что содержимое изменяется по ширине, чтобы снова соответствовать ширине экрана. В чем "хитрость" для достижения этой цели? Я не хочу использовать технику "width:100%", потому что мне все равно хотелось бы, чтобы страница могла "увеличивать масштаб", тогда вам придется панорамировать / прокручивать, чтобы увидеть остальную часть контента.

Answer 1

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

Если вы хотите создать гибкие и гибкие макеты, вы не хотите делать это в своем CSS:

.yourcontent {
  width: 55px;
}

Вы хотели бы создать свои элементы с макетами, основанными на процентах, или макетами на основе видового экрана.

Вы можете играть весь день, пытаясь сделать так, чтобы фиксированная ширина выглядела правильно, но если вы измените свой браузер, вы, конечно, не получите никакой реакции. Используя что-то вроде:

.yourcontent {
   width: 50%;
}

будет использовать только 50% ширины экрана, независимо от размера браузера.

Использование VH и VW (высота области просмотра, ширина области просмотра) предпочтительнее, чем использование фиксированной ширины. Фиксированная ширина может быть изменена в зависимости от размеров экрана с помощью медиа-запросов, но это по сути пустая трата времени, и загрузчик позаботится о (большинстве) медиа-запросах за вас.

пример:

.yourcontent {
   width: 50vw;
}

Посмотрите документацию по начальной загрузке CSS, чтобы увидеть, как это достигается: http://getbootstrap.com/css/

Вы по-прежнему можете увеличивать масштаб с помощью библиотеки, такой как начальная загрузка.

Answer 2

Я нашел решение своей проблемы. Я знаю, что это, вероятно, не практика А +, но, похоже, работает. Я в основном использую фиксированную ширину для элементов в режиме размера "рабочий стол / планшет", но я устанавливаю ширину с помощью jquery (загрузка страницы / поворот экрана), например: $("myselector"). Width(newSizeWidth); где ширина основана на: $(window).width(); Тем не менее, на той же веб-странице я использую макеты% для примерно размеров экрана смартфона. Я условно.show() делюшки смартфона (которые используют% раскладки), а затем скрываю дивы "рабочий стол / планшет" (которые используют фиксированные размеры). Я использую следующее в части Head для мобильных устройств: meta name="viewport" content="width=device-width, initial-scale=1" НО Для смартфонов с экранами меньшего размера, где мне не нужна функция масштабирования, Я изменяю его в функции готовности документа с помощью: viewportmeta.content = 'width=device-width, initial-scale=1,user-scaleable=no';