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; } body{ 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，还望大家不要讨伐我的不严谨啊。
第一篇文章，望海涵。
实在做为一个开拓者，有一个学习的氛围跟一个互换圈子特殊主要这里我要推举c++互换群648，778，840，不管你是小白还是大牛欢迎入住，大家一起互换发展。

学习思路：

学习资料：