# 移动端如何让页面强制横屏 *Published:* 2023-09-07 *Author:* 客服001 #### 温馨提醒如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢本文最后更新于2023年9月7日，已超过 180天没有更新移动设备可以旋转屏幕，但如何做到就算旋转手机页面始终横屏显示呢？首先取得屏幕内可用区域的宽高，然后根据宽高的关系来判断是横屏还是竖屏。如果是竖屏，就把div的宽高设置成横屏的高宽，然后旋转。好了我的测试页面结构如下： ```

lol

``` 很简单对不对，最终的理想状态是，把lol非常和谐的横过来。好了来看看区分横屏竖屏的css： ``` @media screen and (orientation: portrait) { html{ width : 100% ; height : 100% ; background-color: white ; overflow : hidden; } body{ width : 100% ; height : 100% ; background-color: red ; overflow : hidden; } #print{ position : absolute ; background-color: yellow ; } } @media screen and (orientation: landscape) { html{ width : 100% ; height : 100% ; background-color: white ; } body{ width : 100% ; height : 100% ; background-color: white ; } #print{ position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; background-color: yellow ; } } #print p{ margin: auto ; margin-top : 20px ; text-align: center; } ``` 说白了，是要把print这个div在竖屏模式下横过来，横屏状态下不变。所以在portrait下，没定义它的宽高。会通过下面的js来补。 ``` var width = document.documentElement.clientWidth; var height = document.documentElement.clientHeight; if( width < height ){ console.log(width + " " + height); $print = $('#print'); $print.width(height); $print.height(width); $print.css('top', (height-width)/2 ); $print.css('left', 0-(height-width)/2 ); $print.css('transform' , 'rotate(90deg)'); $print.css('transform-origin' , '50% 50%'); } ``` 在这里我们先取得了屏幕内可用区域的宽高，然后根据宽高的关系来判断是横屏还是竖屏。如果是竖屏，就把print这个div的宽高设置下，对齐，然后旋转。如果用户手机的旋转屏幕按钮开着，那么当手机横过来之后，会造成一定的悲剧。解决办法如下: ``` var evt = "onorientationchange" in window ? "orientationchange" : "resize"; window.addEventListener(evt, function() { console.log(evt); var width = document.documentElement.clientWidth; var height = document.documentElement.clientHeight; $print = $('#print'); if( width > height ){ $print.width(width); $print.height(height); $print.css('top', 0 ); $print.css('left', 0 ); $print.css('transform' , 'none'); $print.css('transform-origin' , '50% 50%'); } else{ $print.width(height); $print.height(width); $print.css('top', (height-width)/2 ); $print.css('left', 0-(height-width)/2 ); $print.css('transform' , 'rotate(90deg)'); $print.css('transform-origin' , '50% 50%'); } }, false); ```