Html:
<div id= "Cover1" ></div>
<p id= "cover1w" > Pro, please watch the screen content, thank you ^_^ </p>
Css:
/* Judge the phone 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 to Greater */
@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 goes into your listening method and then window.orientation to get the status of the current screen:
0-Vertical screen
90-Rotate the horizontal screen counterclockwise
-90-rotate the horizontal screen clockwise
180-vertical screen, upside down
If you do not want users to use a horizontal screen view of your page, you can monitor the device rotation time inside the body using CSS3 inside the transition in the rotation to keep the page vertical.
A page on a mobile device that has a Orientationchange event when the screen is rotated. You can increase the listener for this event to the BODY element:
<body onorientationchange= "updateorientation (); >
JS Solution
Today we share a jquery code that can help you judge a horizontal or vertical screen. Note that the jquery method is called here, so you need to refer to 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 = = | | window.orientation = =-90) {
$ ("Body"). attr ("Class", "Landscape");
Orientation = ' landscape ';
return false;
}
}
$ (function () {
Orient ();
});
$ (window). bind (' Orientationchange ', function (e) {
Orient ();
});
CSS3 Perfect solution to the mobile phone screen judging, let users see the invitation letter more Cool