css3 perfectly solves the problem of horizontal and vertical screen judgment on mobile phones, allowing users to read invitations more comfortably_html/css_WEB-ITnose

html:

Dear, please view this screen vertically, thank you^_^

css:

/* Determine whether the mobile phone is horizontal or vertical screen */

@media screen and (orientation:portrait) {
/* css[vertical definition style] */
#cover1{display: none;width: 100%;height: 100%;background-color: #000;opacity:1 ;position: absolute;z-index: 9999;top: 0px;left: 0px;}
#cover1w{display: none;width: 70%;height: 40px;position: absolute;z-index: 10000;top : 50%;left: 15%;margin-top: -20px;font-size: 18px;color: #fff;font-weight: bolder;text-align: center;}

}

@media screen and (orientation:landscape) {
/* css[horizontal definition style] */
#cover1{display: block;width: 100%;height: 100%;background-color: #000;opacity:1;position: absolute;z-index: 9999;top: 0px;left: 0px;}
#cover1w{display: block;width: 70%;height: 40px;position: absolute;z -index: 10000;top: 50%;left: 15%;margin-top: -20px;font-size: 18px;color: #fff;font-weight: bolder;text-align: center;}

}

/* PC client or large screen device: 1280px or larger*/
@media only screen and (min-width: 1280px) {
#cover1{ display: none;width: 100%;height: 100%;background-color: #000;opacity:1;position: absolute;z-index: 9999;top: 0px;left: 0px;}
#cover1w{ display: none;width: 70%;height: 40px;position: absolute;z-index: 10000;top: 50%;left: 15%;margin-top: -20px;font-size: 18px;color: #fff ;font-weight: bolder;text-align: center;}
}

Other reference solutions:

When the user rotates the screen, it will enter your listening method, and then obtain the status of the current screen through window.orientation:
0 - Portrait screen
90 - Counterclockwise rotation for landscape screen
-90 - Clockwise rotation for landscape screen
180 - Portrait screen, upside down

If You don't want users to view your webpage in landscape mode. You can use the rotation of the transition in CSS3 for the body in the device rotation time monitor to keep the page vertical.

For pages on mobile devices, there will be an orientationchange event when the screen is rotated. You can add a listener for this event to the body element:

js solution

Today we share a jQuery code that can effectively help you determine whether the screen is horizontal or vertical. Note that the jQuery method is called here, so you need to reference the jQuery class library. function orient() {
alert('gete');
if (window.orientation == 0 || window.orientation == 180) {
$("body").attr("class ", "portrait");
orientation = 'portrait';
return false;
}
else if (window.orientation == 90 || window.orientation == -90) {
$("body").attr("class", "landscape");
orientation = 'landscape';

return false;
}
}


$(function(){
orient();
});


$(window).bind( 'orientationchange', function(e){
orient();
});

??