it-swarm.com.ru

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

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

Я пытался с помощью:

<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

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

17
user782104

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

9
Victor Luna

<meta id = "meta" name = "viewport" content = "ширина = ширина устройства; начальный масштаб = 1,0; максимальный масштаб = 1,0; масштабируемый пользователем = 0;">
работает только когда окно загружено без изменения размера

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

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

4
Lucky Chingi

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

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

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

также вы можете использовать свойство мультимедиа и применить мудрый экран CSS.

3
Vyankatesh Shirde

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

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

2
andreasbecker.de

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

<html>
  <head></head>
  <body>
    <div id="wrapper">
      //everything goess inside here
    </div>
  </body>
</html>
  1. используйте rem/em вместо px. Вы не использовали rem/em/vw последовательно. Это означает, что для левого поля вы использовали 50px. И будет время, когда это вызовет смещение Слова.

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

удачи.

2
sagarthapa

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

2
Mark

Используя чистое transform: 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
}

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

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

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

1
Vincent Chan