HTML5 Implementation method
We make out of the H5 page in the mobile phone to browse the time, the user is likely to produce a replacement of the screen operation, then if we can determine the screen, we can better optimize our web page, and then have a better user experience. Here is the code to judge the screen:
Window.addeventlistener (' Orientationchange ', function (event) {
if (window.orientation = = 180 | | window.orientatio n==0) {
alert ("vertical screen");
}
if (window.orientation = = | | window.orientation = -90) {
alert ("Horizontal screen");
}
});CSS3 to judge the vertical screen of mobile phone horizontal screen
When the user spins 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-clockwise rotation horizontal screen
180-vertical screen, upside down
If you do not want users to view your pages using a horizontal screen, you can keep the page vertical by monitoring the rotation of the body using the CSS3 inside the transition during the device rotation.
A page on a mobile device that has a Orientationchange event when the screen rotates. You can increase the monitoring of this event for the BODY element:
<body onorientationchange= "updateorientation ();" >
Monitor changes in the form to monitor the screen of the phone @media screens and
(orientation:portrait) {
css[vertical definition style]
}
@media Screen and (Orientation:landscape) {
css[horizontal definition style]
}Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
