Что пошло не так?
Я понял, что случилось. Когда вы поворачиваете влево на 90 градусов (-90 градусов) с помощью transform-origin: top right, поле расширяет содержащее html до вправо , таким образом, его можно прокручивать до right .
Однако, когда вы поворачиваете вправо на 90 градусов (+90 градусов) с помощью transform-origin: top left, поле расширяет содержащий html до влево и это не приводит к его прокрутке влево. Об этом конкретном сценарии шла дискуссия здесь, на SO . Попробуйте прочитать.
Обходной путь
Зная это, мы можем вместо этого манипулировать от transform-origin до bottom left так, чтобы коробка вращалась таким образом, чтобы она расширяла содержимое html до вправо и вызывает появление полосы прокрутки. Однако, делая это, мы должны отрегулировать это так, чтобы позиция была правильной. Для этого мы можем использовать другую функцию transform, которая translate. Я изменил ваши .rotator и .rotator-right классы, чтобы использовать translateX и translateY перед вращением, чтобы положение после вращения было правильным.
(я рекомендую поиграть с функцией transform. Попробуйте сделать один предмет, который применяется rotate до translate и один предмет, который применяется translate до rotate. Результаты отличаются! Вы узнаете что-то новое.)
Советую попробовать настроить Значения transform и overflow-y, чтобы увидеть, что я имею в виду под квадратом, расширяющим html вправо и влево как для .rotator, так и .rotator-right класса.
Вот рабочее решение. Я добавил настроил вашу CSS часть на .rotator-right и .rotator. Вы больше не используете left или top для регулировки положения, вы полностью управляете функцией transform. Попробуйте запустить его в полноэкранном режиме и включите мобильный режим в своем браузере.
function myFunction() {
var wSH = window.screen.height
var wI = window.innerHeight
var dBC = document.body.clientHeight
var wO = window.screen.orientation.type
document.getElementById("wSH").textContent = wSH
document.getElementById("wI").textContent = wI
document.getElementById("wO").textContent = wO
document.getElementById("dBC").textContent = dBC
var bodyDocument = document.body;
var iosDevice = /iPad|iPhone|iPod/.test(navigator.userAgent) &&
!window.MSStream;
if (window.matchMedia('(orientation: landscape)').matches &&
(
(window.screen.height < 425) /* for android */ ||
(iosDevice && window.innerHeight < 425) /* for iOS */
)
) {
bodyDocument.classList.add('rotator-right')
} else {
bodyDocument.classList.remove('rotator-right')
}
document.getElementsByTagName('body')[0].style.display = 'none';
setTimeout(function() {
document.getElementsByTagName('body')[0].style.display = 'block';
if (bodyDocument.classList.contains('rotator-right')) window.scrollTo(bodyDocument.getBoundingClientRect().width, 0)
}, 200);
}
window.addEventListener("resize", myFunction);
myFunction();
* {
box-sizing: border-box;
}
body,
html {
margin: 0;
}
p {
margin: 0;
padding: 16px 0;
}
@media screen and (orientation:landscape) {
.rotator {
transform-origin: top right;
width: 100vh;
/* Try playing with these properties to see the transformation */
/* Use scale at the very end of transform if needed */
transform: translateX(-100%) rotate(-90deg);
transition: all .5s ease;
overflow-y: hidden;
}
.rotator-right {
transform-origin: bottom left;
width: 100vh;
/* Try playing with these properties to see the transformation */
/* Use scale at the very end of transform if needed */
transform: translateY(-100%) rotate(90deg) scale(0.85);
transition: all .5s ease;
overflow-y: hidden;
}
}
<body id='body'>
<div class='container'>
<p>Click the button to display this frame's height and width.</p>
<p id="demo"></p>
<p>window.scroll.height :
<span id="wSH"></span>
</p>
<p>window.innerHeight :
<span id="wI"></span>
</p>
<p>document.body.clientHeight :
<span id="dBC"></span>
</p>
<p>window.orientation :
<span id="wO"></span>
</p>
<button>Try it</button>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac magna nec nisi accumsan blandit. Quisque feugiat commodo sapien quis pharetra. Sed elit justo, volutpat ac eleifend eu, aliquet in orci. Proin fermentum purus nec ante molestie sodales.
Cras malesuada nunc purus, id iaculis magna suscipit nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam pulvinar eu lectus eu sollicitudin. Integer mauris sem, posuere vel est a, eleifend pulvinar
lectus. Duis sapien velit, tristique imperdiet purus nec, scelerisque porta massa. Proin commodo faucibus purus, in volutpat lectus maximus sed. Suspendisse potenti.
</p>
<p>
Curabitur maximus elementum nibh, at rhoncus dolor auctor in. Donec ultrices enim ac est sollicitudin euismod. Mauris tempor eget dolor sit amet consequat. Suspendisse volutpat efficitur eros, vitae imperdiet tellus. Vestibulum aliquam nunc eget ante
porta gravida. Aliquam cursus fermentum accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur condimentum tempus mollis. Suspendisse luctus posuere sapien, ut pharetra lacus eleifend ut.
</p>
<p>
Morbi eu finibus quam. Morbi pharetra mollis diam id hendrerit. Etiam rhoncus, dolor quis hendrerit consectetur, est urna efficitur erat, in vestibulum nunc erat eget sapien. Curabitur ut massa semper, feugiat quam eu, rhoncus tortor. Ut quis convallis
diam, et euismod sem. Cras volutpat libero id nulla varius, at egestas elit consectetur. Nulla posuere neque risus, eu mollis dolor vehicula ut. Donec a ipsum eu justo malesuada lacinia in porta nibh. Aenean risus erat, molestie elementum eros vitae,
tempor porta lacus. Fusce et bibendum est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas vel est ac justo vehicula commodo eget eget magna. Etiam vitae aliquet eros, rutrum porta ligula. Nulla at
fringilla lacus, sed commodo justo. Aenean imperdiet maximus tortor sed volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Curabitur finibus dictum condimentum. Nulla scelerisque dui elit, sit amet lobortis tellus mollis ut. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ac ex sapien. Maecenas ac pellentesque nisi, id mattis
ligula. Sed lacinia feugiat ultricies. Sed ultrices facilisis efficitur. Vestibulum quis libero nec quam convallis mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacus neque, sodales sit amet facilisis eu, viverra vel nulla.
Nullam nec dapibus metus. Aenean pulvinar molestie dolor. In hac habitasse platea dictumst.
</p>
<p>
Nunc commodo magna id nisl ultricies porta. Nulla eget purus et mi malesuada hendrerit. Aenean euismod mauris placerat est dapibus, venenatis posuere lacus fermentum. Cras purus lorem, tristique non semper sit amet, pulvinar a ligula. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse ultricies ultrices posuere. Nulla eu pellentesque ante. Curabitur consequat odio eget purus vestibulum, nec vestibulum lacus mollis. Etiam cursus, ipsum vehicula
auctor rhoncus, diam massa fermentum nibh, ac tincidunt neque arcu et risus.</p>
<hr />
<p>--------- This is the last line ---------</p>
</div>
</body>
Одна моя проблема: вы использовали этот код, чтобы определить, является ли устройство iOS: /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;. Я не могу найти надлежащую документацию по этому вопросу, так что это может быть неточный код. Кроме того, из MDN о сниффинге пользовательского агента :
Стоит повторить: очень редко стоит использовать сниффинг пользовательского агента. Почти всегда можно найти лучший, более совместимый способ решения вашей проблемы!
Кроме того, похоже, что Safari (iOS) также поддерживает window.screen.height.