⼿机html强制横屏显⽰,Css实现⼿机端页⾯强制横屏（仅适⽤
与⼀屏页⾯）
样式
@media screen and (orientation: portrait) {
html{
width : 100vmin;
height : 100vmax;
}
body{
width : 100vmin;
height : 100vmax;
}
#gyroContain{
width : 100vmax;
height : 100vmin;
transform-origin: top left;
transform: rotate(90deg) translate(0,-100vmin);
}
}
@media screen and (orientation: landscape) {
html{
width : 100vmax;
height : 100vmin;
}
手机上可以打html与css的appbody{
width : 100vmax;
height : 100vmin;
}
#gyroContain{
width : 100vmax;
height : 100vmin;
}
}
结构
⾮常多⾮常多的⽂字
P.S. 如果你的页⾯⾥有from表单要填的话，应该⽤ 「弹出遮罩层让⽤户旋转⼿机」 的解决⽅案。检测⼿机竖屏下，提⽰⽤关闭屏幕旋转锁定，并横置⼿机。想想⼿机浏览器还是竖屏，⽽内容却被强制横屏的画⾯有多奇怪吧...
P.S. 页⾯强制横屏是⼀碗都快放坏了的冷饭。但⽂主百度到的解决⽅法都⽤了js。⽂主觉得有些⾼炮打蚊⼦。所以⾃⼰⽤Css+Html实现了⼀个。⽂章内的代码只是⼀个给⼤家发散思维的littleDemo，你们想竖屏滚动就去掉height加y-auto, 想有背景⾊就加bg-color，还望⼤家不要讨伐我的不严谨啊。第⼀篇⽂章，望海涵。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。