0

Как при изменении размеров окна браузера сделать так, чтобы та сайт вообще не менялся, т.е. та часть, которая окажется за пределами окна, просто не была видна. Например, у сайта vk.com, да и у большинства, так делается.

я не о фиксированной и резиновой верстке. пример того, что я хотела https://pp.vk.me/c631422/v631422331/30b35/ee0Ehvv26_E.jpg

3
  • 1
    Если я правильно понял, просто прописывать конкретные размеры в px элементам сайта. Или вы об этом : значение fixed свойства position задаёт элементу фиксированное позиционирование. Commented 28 мая 2016 в 19:21
  • я не о фиксированной и резиновой верстке.
    – V. Ivanova
    Commented 28 мая 2016 в 19:55
  • кстати, у vk.com overflow: hidden;
    – Ponio
    Commented 29 мая 2016 в 8:07

2 ответа 2

5

Данное поведение достигается за счет заданной минимальной ширины, с помощью свойства min-width. В случае с Яндекс это min-width: 936px;. Вот пример их CSS:

.rows {
    min-width: 936px;
}

Ниже приведен полный пример требуемой вами верстки:

.container {
  min-width: 1200px;
}
<!DOCTYPE>
<html>

<head>
  <title>Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores dolorum nihil explicabo, dolores iure, consequuntur voluptatem autem nesciunt aliquam officia, suscipit ullam repellendus sit. Reiciendis architecto, eveniet a quisquam nemo doloremque
      ullam nam consectetur eligendi repellendus. Numquam illum, minus perferendis nostrum hic ducimus expedita accusamus iste molestiae neque quo distinctio quam eligendi ex eos consequatur nihil sapiente incidunt quis nulla ab beatae atque provident
      est vel.</p>

    <p>Iusto officiis iure provident dignissimos eligendi dolorem, vitae aliquid tempore eum itaque, vero deleniti qui. Delectus sequi voluptas provident magnam, hic minima maxime ab ducimus perferendis, aspernatur quis sunt minus veniam dolorum, id, tenetur
      officia. Quos sint dicta minima, possimus quia illum ex maiores eligendi aut doloremque suscipit non earum omnis fugiat eius eum veniam sed nesciunt ratione nulla temporibus, voluptatem, optio debitis.</p>

    <p>Unde, odit at illo rem aliquam est libero, magni hic ipsa aut, nihil dicta, facere! Numquam officia, iusto laboriosam qui minima aliquam, necessitatibus quod, excepturi nulla accusamus optio. Quae architecto cupiditate quos animi officiis dicta sequi
      minus aliquam, dolorem dolore officia libero ut deserunt vitae dolor similique consequatur perspiciatis natus, commodi incidunt odit adipisci ad eveniet accusamus! Veritatis in nihil iusto numquam sunt ullam deserunt facere temporibus ex odio, sapiente
      iure.</p>
  </div>
</body>

</html>

Вот такой meta тег запретит мобильным устройствам масштабировать страницу:

<meta name="viewport" content="width=device-width, initial-scale=1">

А вот эти стили не дадут содержимому страницы сжаться меньше, чем до 1200px по ширине.

.container {
  min-width: 1200px;
}
2
  • а на мобильных устройствах откроется вообще?
    – V. Ivanova
    Commented 28 мая 2016 в 20:34
  • @V.Ivanova, конечно, откроется. Почему вы думаете, что нет?
    – VenZell
    Commented 28 мая 2016 в 20:36
1

Общая ошибка заключается в том, что разработчики часто используют значение initial-scale=1 для неадптивных шаблонов. Такая установка приводит к отрисовке 100% страницы без масштабирования. Если дизайн неадаптивный, то пользователю приходится либо много прокручивать, либо вручную устанавливать масштаб, чтобы увидеть всю страницу. Самый плохой случай - сочетание <user-scalable=no или maximum-scale=1 с initial-scale=1> Таким образом отключается возможность масштабирования на сайте. А без масштабирования нет возможности увидеть всю страницу. Если ваш шаблон не адаптивный,не отключайте масштабирование и не сбрасывайте начальный масштаб!

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

Ключевое слово здесь user-scalable=no

Источник http://ruseller.com/lessons.php?id=1560&rub=2

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.