Масштабирование всего тела при изменении размера окна

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

Я попытался использовать:

<meta id="meta" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

и

<script type="text/javascript">
  $(document).ready(function () {

    $(window).resize(function () {
      calculateNewScale();
    });

    calculateNewScale(); // if the user go to the page and his window is less than 1920px

    function calculateNewScale() {
      var percentageOn1 = $(window).width() / 1920);
      $("body").css({
        "-moz-transform": "scale(" + percentageOn1 + ")",
        "-webkit-transform": "scale(" + percentageOn1 + ")",
        "transform": "scale(" + percentageOn1 + ")"
      });
    }
  });

А также с CSS

body {
width:100vw;
height:100vh;
}

Веб-сайт находится здесь:

kotechweb.com/new_focus/page/about_us

Проблема заключается в том, что прямо сейчас содержимое перекрывается при изменении размера.

Ответы

Ответ 1

Порт представления: <meta name="viewport" content="width=device-width, initial-scale=1">. Это заставит браузер отображать ширину страницы по ширине собственного экрана. В этой статье содержится дополнительная информация о метатегах viewport: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

Ответ 2

< meta id = "meta" name= "viewport" content = "width = device-width; initial-scale = 1.0; maximum-scale = 1.0; user-scaleable = 0;" >
работает только при загрузке окна без изменения размера

Функция

calculateNewScale() просто пытается изменить размер тела Размер шрифта установлен в px - измените их на% или rem

Я знаю, что вы не хотите, чтобы сайт реагировал, но настройка мультимедийных запросов CSS может помочь с тем, что вы хотите.

Ответ 3

вы можете использовать для ответа

1.width = единица ширины устройства задает ширину страницы, чтобы следовать ширине экрана устройства (которая будет меняться в зависимости от устройства). 2.initial-scale = 1.0 part устанавливает начальный уровень масштабирования, когда страница сначала загружается браузером. например meta name= "viewport" content = "width = device-width, initial-scale = 1.0"

некоторые дополнительные правила: 1. НЕ используйте большие фиксированные элементы ширины 2. НЕ разрешайте содержимому полагаться на определенную ширину окна просмотра, чтобы хорошо отображать 3. Используйте мультимедийные запросы CSS для применения различных стилей для небольших и больших экранов.

также вы можете использовать свойство media и применять скринсейвер css.

Ответ 4

Тэг viewport неправильный, должен быть <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Но возможно <meta name="viewport" content="user-scalable=no" /> будет работать.

Ответ 5

Есть несколько вещей, которые вы можете сделать: 1. измените свой макет HTML. Поместите изображение, содержимое и нижний колонтитул в контейнер или обертку, например

<html>
  <head></head>
  <body>
    <div id="wrapper">
      //everything goess inside here
    </div>
  </body>
</html>

  1. используйте rem/em вместо px. Вы не использовали rem/em/vw последовательно. Значение, для левой границы вы использовали 50 пикселей. И будет время, когда это вызовет сдвиг слов.

  2. ваш тег включает загрузку. Если вы используете bootstrap..., то вам лучше использовать BootStrap Grid. Сначала я бы создал страницу для мобильного просмотра, а затем я буду использовать тот же макет для большего экрана.

удачи.

Ответ 6

Если вы используете bootstrap, вы можете просто изменить класс контейнера на class= "container-fluid"

Ответ 7

Используя чистое преобразование: scale (x), вы столкнетесь с множеством проблем с разметкой, центрированием и позиционированием, если только вы не компенсируете некоторой логикой JavaScript.

Некоторые вещи CSS, которые вы можете сделать:

1) Вы можете сделать основной фоновой масштаб на основе ширины браузера, применяя

body { 
  background-size: cover;
  background-repeat: no-repeat;
}

2) Вы можете сделать все единицы измерения на основе единиц vw похожими на это:

Масштабирование шрифтов на основе ширины контейнера

например, если вы хотите, чтобы ваши шрифты масштабировались пропорционально вашей ширине, вы можете установить

body {
  font-size: 0.835vw; //around 14px at 1920px
}

Еще один пример: если вы хотите, чтобы контейнер размером 300px с шириной 1920px для масштабирования по ширине, вы можете сделать этот контейнер

.container {
  height: 150vw; //around 300px at 1920px
}

Предположительно, вы не пытаетесь сохранить нижний колонтитул внизу на всех размерах? В противном случае вы можете просто использовать позицию: fixed; на нижнем колонтитуле.

Кроме того, если вы сохраняете фиксированное соотношение сторон, у вас будет очень смешной интервал, если высота браузера выше ширины. Вы уверены, что это то, что вы хотите?

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