1.媒体查询

 @media screen and (orientation: portrait){   //竖屏状态下   }@media screen and (orientation: landscape) {   //横屏状态下   }通过link 实现横竖屏不同的css
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">  竖屏
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">  横屏

2.js实现强制横屏

(function () {function resize() {var body = document.getElementsByTagName('body')[0];var html = document.getElementsByTagName('html')[0];var width = html.clientWidth;var height =  html.clientHeight;var max = width > height ? width : height;var min = width > height ? height : width;body.style.width = max + "px";body.style.height = min + "px";}resize();window.addEventListener("resize", resize)
})();
原文链接：https://blog.csdn.net/u010934423/article/details/78867605

3.通过判断宽高来实现横竖屏转换

var event = "onorientationchange" in window ? "orientationchange" : "resize";window.addEventListener(event, function() {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);
原文链接 ：https://www.jianshu.com/p/9c3264f4a405

4.监听横竖屏

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {if (window.orientation === 180 || window.orientation === 0) {alert('竖屏状态！');//做相对应的处理}if (window.orientation === 90 || window.orientation === -90 ){alert('横屏状态！');//做相对应的处理} 
}, false);原文链接：https://blog.csdn.net/Neil_1993/article/details/90481352