樣式
@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，還望大家不要討伐我的不嚴謹啊。第一篇文章，望海涵。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
