Пустое пространство: Nowrap не работает хорошо, что я сделал не так? - PullRequest
Новая
       32

Пустое пространство: Nowrap не работает хорошо, что я сделал не так?

0 голосов
/ 22 января 2019

Я создаю адаптивную веб-страницу, где при максимальной ширине 768 пикселей (через медиа-запрос) div внутри основного контейнера предполагает изменение на inline-block, чтобы страница прокручивалась горизонтально до идентификатора div, когда пользователь нажимает на ссылку.Страница настроена с переполнением: скрыто, поэтому она перемещается с использованием только идентификатора / привязки.

Проблема в том, что когда я делал предварительный просмотр на мобильном устройстве, контейнер просто растягивался, и я мог полностью провести по странице.Даже кнопка меню, которая должна находиться в центре порта просмотра, переместилась в центр контейнера.И оставляя огромный пробел под ним.Однако в настольном браузере все получилось.Так что я предполагаю, что все это связано с функцией nowrap.

Он работал в Firefox как для мобильных, так и для настольных компьютеров.Это работало на рабочем столе IE.Это не работает в Chrome Mobile, но, похоже, работает на настольном компьютере.И потерпел неудачу в мобильном Safari, еще не тестировал в настольном компьютере.

Я попытался удалить пробел: функция nowrap только для того, чтобы узнать, что div не накладывает встроенный блок, как предполагалось.Я попытался указать ширину контейнера и минимальную ширину без удачи.Я попробовал float: left, значения позиций и кучу вещей, которые я не помню их всех.Ничего не меняется.

HTML 

<div id="container">
  <div id="company" class="company">
    <iframe src="main.html">
    </iframe>
  </div>
  <div id="content" class="content">
    <iframe src="content.html">
    </iframe>
  </div>
  <div id="system" class="system">
    <iframe src="system.html">
    </iframe>
  </div>
</div>

css 

body{
  overflow: hidden;
}
#container {
  height: 100vh !important;
  min-height: 100vh !important;
}
#container .company, #container .content, #container .system {
  display: block;
  height: 100vh !important;
  min-height: 100vh !important;
}
@media screen and (max-width:768px) {
  #container {
    display: block;
    white-space: nowrap;
  }
  #container .company, #container .content, #container .system {
  display: inline-block;
  }
}
iframe {
  width: 100vw !important;
  min-width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  border: none;
}

Что я ожидал (рабочий стол Chrome) https://kamalmasrun.files.wordpress.com/2019/01/desktop.jpg

Но только до этогов мобильном телефоне https://kamalmasrun.files.wordpress.com/2019/01/screenshot_20190122-120510.png

Ваша помощь очень ценится, и я вначале благодарю всех за помощь =).

Ответы [ 2 ]

0 голосов
/ 25 января 2019

В принципе, у вас есть несколько проблем здесь:

  1. Настройка overflow: hidden не будет препятствовать прокрутке браузера на мобильном устройстве (в Firefox это возможно, но в Chrome или iOS Safari - нет). Честно говоря, блокировку прокрутки на мобильных устройствах сложно сделать, и она всегда немного хакерская, поэтому я бы так не поступил.
  2. Чтобы прокрутить (или перейти), используя ссылки с #content и т. Д., Тело должно быть расширено, и браузер должен увидеть, где находится этот элемент. Расширение тела приведет к тому, что пользователь сможет прокручивать влево / вправо, что сложно заблокировать, как я упоминал ранее. Вы должны прокрутить #container, чтобы показать новый элемент. Вы можете сделать это, используя JavaScript.

Кроме того, не забудьте добавить overflow: hidden к #container (это будет работать на мобильных устройствах).

Если что-то все еще неясно, не стесняйтесь спрашивать в комментариях под этим ответом:)

Идея алгоритма для достижения вашей цели:

  1. Прослушивание hashchange события
  2. Считать текущий хеш с window.location
  3. Найти элемент с заданным хешем, используя document.querySelector
  4. Считать позицию элемента внутри контейнера
  5. Установить scrollLeft свойство контейнера равным позиции элемента

Некоторые полезные ссылки для начала работы:

И обновленный CSS: 

body {
  overflow: hidden;
  margin: 0;
}

#button {
  position: fixed;
  vertical-align: center;
}

#button .btn1,
.btn2,
.btn3 {
  padding: 10px;
  display: inline-block;
}

#container .company,
.content,
.system {
  display: block;
  height: 100vh;
  min-height: 100vh;
  width: 100vw;
}

@media screen and (max-width:768px) {
  #container {
    display: flex;
    flex-flow: row nowrap;
  }
  #container .company,
  .content,
  .system {
    display: block;
  }
}


iframe {
  border: none;
  height: 100vh;
  min-height: 100vh;
  width: 100vw;
}
0 голосов
/ 22 января 2019

Возможно, что установка минимальной / максимальной ширины в #container поможет. 

#container {
    min-width: 100vw;
    max-width: 100vw;
}

Кроме того, я бы предложил использовать flex здесь, так как он подходит и более современен.

...