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;
}
body{
html手机网站width : 100vmax;
height : 100vmin;
}
#gyroContain{
width : 100vmax;
height : 100vmin;
}
}
结构
<html>
<body>
<div id="gyroContain">
⾮常多⾮常多的⽂字
</div>
</body>
</html>
P.S. 如果你的页⾯⾥有from表单要填的话，应该⽤「弹出遮罩层让⽤户旋转⼿机」的解决⽅案。检测⼿机竖屏下，提⽰⽤关闭屏幕旋转锁定，并横置⼿机。想想⼿机浏览器还是竖屏，⽽内容却被强制横屏的画⾯有多奇怪吧...
P.S. 页⾯强制横屏是⼀碗都快放坏了的冷饭。但⽂主百度到的解决⽅法都⽤了js。⽂主觉得有些⾼炮打蚊⼦。所以⾃⼰⽤Css+Html实现了⼀个。⽂章内的代码只是⼀个给⼤家发散思维的littleDemo，你们想
竖屏滚动就去掉height加y-auto, 想有背景⾊就加bg-color，还望⼤家不要讨伐我的不严谨啊。第⼀篇⽂章，望海涵。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。