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

[Anonymous]

Пытаюсь создать макет с заголовком, который будет прокручиваться вертикально за пределы страницы, как обычно. Но если кто-то использует полосы прокрутки HTML (важно, что это полосы прокрутки HTML, поэтому не нужно искать полосы горизонтальной прокрутки, полосы прокрутки HTML всегда отображаются в нижней части области просмотра), а заголовок застрял горизонтально. Это макет, в котором содержимое шире области просмотра, но желательно, чтобы заголовок всегда отображался горизонтально, но позволял ему прокручиваться по вертикали за пределы экрана, чтобы освободить место на экране.
Когда один прокручивается вправо, рядом с заголовком обычно есть пустое открытое пространство, я хочу, чтобы заголовок оставался закрепленным горизонтально (но, как упоминалось ранее, прокручивайте вертикально).
Здесь вы можете увидеть когда я прокручиваю рабочий стол по горизонтали, золотой заголовок остается в место и заполняет всю ширину.


Но как только вы переключитесь на мобильный телефон, он больше не работает, вы можете увидеть здесь белый пробел при горизонтальной прокрутке вместо того, чтобы заголовок оставался на месте:

Этот фрагмент кода не переключается на мобильный вид, поэтому вам придется скопировать и вставить его в файл и попробуйте сами, если хотите увидеть, что происходит на мобильных устройствах:

Код: Выделить всё

* {
box-sizing: border-box;
}
html {
overflow-y: scroll;
width: max-content;
}
body {
margin: 0;
}
header {
background: goldenrod;
border-right: 1px solid red;
position: sticky;
left: 0;
width: calc(100vw - 15px);
}
main {
width: 120vw;
height: 120vh;
background: gray;
}




 Header


Main stuff
Paragraph that is very wide, so wide it should go beyond the width of the viewport, loooooooooooooooooooooooooooooooooooooooong

Этот фрагмент кода НЕ переключается на просмотр на мобильных устройствах и не отображает проблему, он предоставлен только для полноты картины.

Код: Выделить всё

* {
box-sizing: border-box;
}

html {
overflow-y: scroll;
width: max-content;
}

body {
margin: 0;
}

header {
background: goldenrod;
border-right: 1px solid red;
position: sticky;
left: 0;
width: calc(100vw - 12px);
}

main {
width: 200vw;
height: 120vh;
background: gray;
}

Код: Выделить всё

Header, should stick horizontally, scroll vertically as usual



Main stuff
Paragraph that is very wide, so wide it should go beyond the width of the viewport, loooooooooooooooooooooooooooooooooooooooong

Подробнее здесь: https://stackoverflow.com/questions/793 ... not-mobile