The webpage is designed for mobile phone horizontal screen. If the page is displayed vertically, the page will be messed up.
伊谢尔伦2017-05-19 10:23:44
Can judge and then prompt the user to rotate
if(window.orientation==90||window.orientation==-90){
alert("横屏状态!")
}
Or listen for rotation events
window.onorientationchange = function(){
switch(window.orientation){
case -90:
case 90:
alert("横屏:" + window.orientation);
case 0:
case 180:
alert("竖屏:" + window.orientation);
break;
}
}
css media query can also be judged
@media (orientation: portrait) { } 横屏 @media (orientation: landscape) { }竖屏
But there is still a solution:
When opening the page, you can use window.orientation to determine whether the webpage is horizontal or vertical. If it is vertical, add styles to the entire page
transform: rotate(90deg);
In this way, your page will display the horizontal screen effect.
PHPz2017-05-19 10:23:44
The front end cannot control the horizontal and vertical screen of the mobile phone, but it can be judged through css conditions:
Portrait:
@media screen and (orientation:portrait){
#wrap{
display:none;
}
}
Landscape:
@media screen and (orientation:landscape){
#wrap{
display:block;
}
}
For example, when the screen is vertical, the prompt text is displayed: Please browse horizontally.
Use css operation to show and hide after horizontal screen.