1
Я пытаюсь сделать горизонтальный прокручиваемый веб-сайт, используя Bootstrap. Он хорошо выглядит на настольных компьютерах, но у меня большие проблемы на мобильных устройствах. Код упрощен:Горизонтальный сайт на мобильном - какой видовой экран?
HTML:
<body>
<section id="one">
stuff here
</section>
<section id="two">
stuff here
</section>
<section id="three">
stuff here
</section>
<section id="four">
stuff here
</section>
</body>
CSS:
body {width:400vw;height:100vh;}
section {100vw;float:left;height:100vh}
Теперь, если я делаю это так:
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
На iPhone 5 (и, возможно, других телефонов) все разделы отображаются на одной странице, каждая 25% страницы, фиксированная навигационная панель Bootstrap также занимает всего 25% экрана (но рухнула - она имеет мобильный вид).
С другой стороны, с этим кодом:
<meta name="viewport" content="width=device-width, initial-scale=0.25,maximum-scale=0.25">
Каждый раздел соответствует экран красиво, страница прокручивается по горизонтали, как и должно быть, но:
- все мало - шрифты, картинки и т.д. .
- Bootstrap col-sm, col-xs макет не пинает, он выглядит как макет рабочего стола с дальнего расстояния
- Bootstrap navbar не рушится - выглядит как deskt op navbar
Любая идея, как это решить?
Использовать ширину устройства% и viewport –
@ Jonasw спасибо, блестящий! У меня только проблема с навигацией теперь на мобильном телефоне, но я думаю, что смогу это понять. – oneday
не беспокоится :) как им все еще новичок в SO и нужно зарабатывать репутацию, пожалуйста, отметьте мой ответ как решение –