检测横竖屏状态，并且只能竖屏浏览页面

HTML部分：

<div id="orientLayer" class="mod-orient-layer">
　　<div class="mod-orient-layer__content">
　　　　<i class="icon mod-orient-layer__icon-orient"></i>
　　　　<div class="mod-orient-layer__desc">为了更好的体验，请使用竖屏浏览</div>
　　</div>
</div>

css部分：

#orientLayer { display: none }
#orientLayer.show{display: block;}
.mod-orient-layer { display: none; position: fixed; height: 100%; width: 100%; left: 0; top: 0; right: 0; bottom: 0; background: #000; z-index: 9997 }
.mod-orient-layer__content { position: absolute; width: 100%; top: 45%; margin-top: -75px; text-align: center }
.mod-orient-layer__icon-orient {display: inline-block; width: 67px; height: 109px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAADaCAMAAABU68ovAAAAXVBMVEUAAAD29vbx8fHx8fH5+fn29vby8vL5+fn39/f6+vrx8fH+/v709PTx8fH39/fx8fH///+WLTLGAAAAHXRSTlMAIpML+gb4ZhHWn1c2gvHBvq1uKJcC6k8b187lQ9yhhboAAAQYSURBVHja7d3blpowFIDhTUIAOchZDkre/zE7ycySrbUUpsRN2/1fzO18KzEqxEVgTiZNfgmmtxRc8iaR8HNe8x4BtjQePKayYCIoyBSgvNNE1AkNSHqZyLqk97EgUCCHBzZ5mkg7ScvIJuIyOyXBRFxgpqWZyGsAZLB1KjsJi8nutHU4JCRbFRH8tmirI9k8Jx2sqNs8K/m0LQkrktO2crgcgXGB4AiTEsB0hJfo9MGgX7CGcYiYwQxmMOOvZwRhBG8tCoMXjBDeXvWCEcHbi14wgCBmMIMZzGAGM5jxETNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxY6E2rUQxnH2tz9cirlJFwFBJedaPnUv0M7++egPDE8iAJcIDmxwH5wwv9vUviw2kLbVO3TJU5uul/EyB0FoLp4x60PdGUd3qPurrWyjGGTc05u+1dcgI7/+tCCPARWGhH7o5Y7RCf+bH9ctXLp6v2BVDxfqz0oPXeSVaNtINo/1SXDv4dck8IIkbhtC2ol+iouEonTBCbYvVMnXOjxww6s/RFrBUpXHh/gw1rHj5d/qhYn9Gpk2FWh6xRBRX5Oj3Znh2Sq49/L6+y8pB26q9GbE2dbA2mVbx6I+7MfBglLCttm73ZQi7AD3iL4HqjFYJHSPRppqaUaJ3ATpGa+ckpGak2hRRMyqjGMkvl+xyFeSMwjAqcsZgGDdyhl0oNTnDN4yenJGZFGxNChP5/Y3efh6SM2rDOJMzboYxkDMqwyjIGcIw6F+io2FU1IxIm1JqRmgXSkvNKNCXeTpGrU0JNSO2c6LIGPgCS8AuDHz9ta0SXWDtxoDRH+MqlbC2Dt2G2JFRadtQZt2qq/orGowdGb2euxYiqWEpVWhTBnszoNAPdStuQwxqf0aocdWKW4Z+DfszIh8pxJqbuCE4YAC+4bm0evtipjpgJHeFnyyt1Ku2xa0bhjxr27p75rECNwyI9ZwvXkHq+7aTaMEV44YYy/spfgjgjNHaWW+GeUhGEX7tLlVinIFDDSgnOwhi1V6bU0b6tVS9eAERe863g4dRrtiHdc6o+nn5vtyVVgR79Cqt4uL6gfHPQyGqtP2vf7HADGbcYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JjhtOM+J/AgT008yDMkN/dPP9hzS8zAMQN3OEYeekp5YU7KOKXwVXqiY+QS7smcinGKABWdiBgpPJTSMHJ4KidhhPBUSMLw4CmPhKHgKUXCkHsygum71ftNSgCX6bsl8FQyfbcL5EdYsDk0R3j7aiA5wpt5AjKg/2gLJEBD/0Hf2OOf/vRrj6z/7GtP4B3nMKyjHA12kIPSjnJs3FEO0TvKkYJHOWCR+rjJH0Vn6fI5PjNbAAAAAElFTkSuQmCC'); transform: rotate(90deg); -webkit-transform: rotate(90deg); -webkit-animation: rotation infinite 1.5s ease-in-out; animation: rotation infinite 1.5s ease-in-out; -webkit-background-size: 67px; background-size: 67px }
.mod-orient-layer__desc { margin-top: 20px; font-size: 15px; color: #fff }
@media (min-aspect-ratio: 13/25) {
　　.p1-txtarea{top: 36.4%;}
　　.p1-roleimg{-webkit-transform: scale3d(.9, .9, 1); transform: scale3d(.9, .9, 1); -webkit-transform-origin: right top; transform-origin: right top;}
}
@media (min-aspect-ratio: 15/25) {
　　.scaleholder{-webkit-transform: scale3d(.96, .96, 1); transform: scale3d(.96, .96, 1);}
　　.p1-roleimg{-webkit-transform: scale3d(.85, .85, 1); transform: scale3d(.85, .85, 1); -webkit-transform-origin: right top; transform-origin: right top;}
　　.p3-txtarea{top: 73%;}
}
@media (min-aspect-ratio: 16/25) {
　　.scaleholder{-webkit-transform: scale3d(.92, .92, 1); transform: scale3d(.9, .9, 1);}
　　.p3-txtarea{top: 72%;}
}
@media (min-aspect-ratio: 17/25) {
.p3-dclose{top: -2px;}
.p3-link{bottom: -12px;}
.p3-titholder{top: 0px;}
}

JS部分：

/*检测横屏*/
window.onorientationchange = function(e) {
　　if (window.orientation != 0) {
　　　　$("#orientLayer").addClass("show");
　　} else {
　　　　$("#orientLayer").removeClass("show");
　　}
};

转载于:https://www.cnblogs.com/Cloudloong/p/9562789.html