使移动视图在 +90 度横向时保持纵向模式
Make mobile view stick to Portrait mode while on landscape with +90 degrees
问题：
- 我希望访问者始终以纵向模式查看我的网站
- 我浏览了很多链接，找到了一个可行的解决方案当移动设备以-90度[=变为横向模式时44=]
- 我面临的问题是手机转动 +90 度。当内容旋转 +90 度时，我根本无法滚动内容。如何使内容在旋转 +90 度时仍可滚动？
查看问题：
- 运行 下面的代码片段（整页）在任何移动设备上（或在横向模式下打开移动模式的开发者工具上）
- 你会看到我旋转 +90 度时遇到的问题
- 要查看工作版本（-90 度），请将下面我的 JS 代码中的
rotator-right class 更改为 rotator
我的代码：
(function() {
function myFunction() {
var wSH = window.screen.height;
var wI = window.innerHeight;
var dBC = document.body.clientHeight;
var wO = window.orientation;
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';
}, 200);
setTimeout(function() {
//console.log('inside rotator-right, with document.body.scrollHeight :', document.body.scrollHeight);
}, 100);
}
window.addEventListener("resize", myFunction);
myFunction();
})();
@media screen and (orientation:landscape) {
.rotator {
transform: scale(0.95) rotate(270deg);
transform-origin: top right;
position: relative;
top: 0px;
left: -100vh;
height: 100vw;
width: 100vh;
overflow-y: hidden;
}
.rotator-right {
transform: scale(0.93) rotate(90deg);
transform-origin: top right;
position: relative;
width: 100vh;
top: 50vw;
left: 42vw;
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>
出了什么问题？
我知道出了什么问题。当您使用 transform-origin: top right 向左旋转 90 度（-90 度）时，框会将包含的 html 扩展到 右边 ，从而导致它可以滚动到右边。
但是，当您使用 transform-origin: top left 向右旋转 90 度（+90 度）时，框会将包含的 html 扩展到 左侧 并且这不会导致它向左滚动。已经有关于这个特定场景的讨论 。请尝试阅读它。
解决方法
知道这一点后，我们可以将 transform-origin 操纵为 bottom left，以便框以这样一种方式旋转，将包含 html 扩展到 right 并使滚动条出现。但是，这样做，我们需要调整它，使位置正确。为此，我们可以使用另一个 transform 函数，即 translate。我改变了你的 .rotator 和 .rotator-right classes 在旋转之前使用 translateX 和 translateY 以便旋转后的位置是正确的。
（我建议使用 transform 函数。尝试制作一项在 translate 之前应用 rotate 和一项在 rotate 之前应用 translate . 结果不一样！你会学到新东西。）
我建议尝试调整 transform 和 overflow-y 值，以了解我所说的将包含 html 的框向左和向右扩展的意思 .rotator和 .rotator-right class.
这是一个可行的解决方案。我在 .rotator-right 和 .rotator 上添加了配置你的 CSS 部分。您不再使用 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 about user agent sniffing:
It's worth re-iterating: it's very rarely a good idea to use user agent sniffing. You can almost always find a better, more broadly compatible way to solve your problem!
此外，Safari (iOS) 似乎也支持 window.screen.height。
问题：
- 我希望访问者始终以纵向模式查看我的网站
- 我浏览了很多链接，找到了一个可行的解决方案当移动设备以-90度[=变为横向模式时44=]
- 我面临的问题是手机转动 +90 度。当内容旋转 +90 度时，我根本无法滚动内容。如何使内容在旋转 +90 度时仍可滚动？
查看问题：
- 运行 下面的代码片段（整页）在任何移动设备上（或在横向模式下打开移动模式的开发者工具上）
- 你会看到我旋转 +90 度时遇到的问题
- 要查看工作版本（-90 度），请将下面我的 JS 代码中的
rotator-rightclass 更改为rotator
我的代码：
(function() {
function myFunction() {
var wSH = window.screen.height;
var wI = window.innerHeight;
var dBC = document.body.clientHeight;
var wO = window.orientation;
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';
}, 200);
setTimeout(function() {
//console.log('inside rotator-right, with document.body.scrollHeight :', document.body.scrollHeight);
}, 100);
}
window.addEventListener("resize", myFunction);
myFunction();
})();
@media screen and (orientation:landscape) {
.rotator {
transform: scale(0.95) rotate(270deg);
transform-origin: top right;
position: relative;
top: 0px;
left: -100vh;
height: 100vw;
width: 100vh;
overflow-y: hidden;
}
.rotator-right {
transform: scale(0.93) rotate(90deg);
transform-origin: top right;
position: relative;
width: 100vh;
top: 50vw;
left: 42vw;
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>
出了什么问题？
我知道出了什么问题。当您使用 transform-origin: top right 向左旋转 90 度（-90 度）时，框会将包含的 html 扩展到 右边 ，从而导致它可以滚动到右边。
但是，当您使用 transform-origin: top left 向右旋转 90 度（+90 度）时，框会将包含的 html 扩展到 左侧 并且这不会导致它向左滚动。已经有关于这个特定场景的讨论
解决方法
知道这一点后，我们可以将 transform-origin 操纵为 bottom left，以便框以这样一种方式旋转，将包含 html 扩展到 right 并使滚动条出现。但是，这样做，我们需要调整它，使位置正确。为此，我们可以使用另一个 transform 函数，即 translate。我改变了你的 .rotator 和 .rotator-right classes 在旋转之前使用 translateX 和 translateY 以便旋转后的位置是正确的。
（我建议使用 transform 函数。尝试制作一项在 translate 之前应用 rotate 和一项在 rotate 之前应用 translate . 结果不一样！你会学到新东西。）
我建议尝试调整 transform 和 overflow-y 值，以了解我所说的将包含 html 的框向左和向右扩展的意思 .rotator和 .rotator-right class.
这是一个可行的解决方案。我在 .rotator-right 和 .rotator 上添加了配置你的 CSS 部分。您不再使用 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 about user agent sniffing:
It's worth re-iterating: it's very rarely a good idea to use user agent sniffing. You can almost always find a better, more broadly compatible way to solve your problem!
此外，Safari (iOS) 似乎也支持 window.screen.height。