положение: исправлено, не работает для широкого видового экрана на мобильном телефоне - PullRequest
Новая
       27

положение: исправлено, не работает для широкого видового экрана на мобильном телефоне

0 голосов
/ 06 мая 2019

Я делаю горизонтальную прокручиваемую целевую страницу для мобильных устройств, и у меня возникла серьезная проблема с плагинами jquery лайтбокса. Я попытался написать один, но обнаружил, что проблема в position: fixed не работает вообще.

когда ширина страницы меньше или равна области просмотра, это нормально. но когда я устанавливаю ширину любого элемента на странице более 100vw position: fixed перестает работать (он начинает выглядеть как абсолютное положение) на мобильном Chrome. настольные браузеры по-прежнему отображают его правильно, даже если включен адаптивный режим.

Может, я неправильно делаю весь широкий дизайн? как мне это сделать?

Я загрузил пример кода на бесплатный хост:

с width: 100vw; position:fixed; работает нормально

https://unentertaining -bypa.000webhostapp.com / test_ok.html

с width:200vw; position: fixed; начинает работать как абсолютный

https://unentertaining -bypa.000webhostapp.com / test_wrong.html

вот код: 

body { padding: 0; margin: 0; }

.bg { width: 200vw; height: 100vh; background: linear-gradient(70grad, #aaa, #fff 20%, #aaa 40%, #fff 60%, #aaa 80%, #fff 100%); }

.fx { position: fixed; box-sizing: border-box; top: 25%; left: 25%; width: 50%; height: 50%; }
.fx { background: #faa; border: 10px solid #afa; }
<div class="bg">foo</div>
<div class="fx">bar</div>

Примечание: Я также правильно понял метатег

...