HTML5 actual combat and analysis to determine the horizontal and vertical screen functions of mobile terminals-H5 Tutorial-php.cn

HTML5 actual combat and analysis to determine the horizontal and vertical screen functions of mobile terminals

黄舟

Release： 2017-02-10 14:34:42

Original

1971 people have browsed it

We who often move around on mobile phones are often familiar with the concepts of horizontal and vertical screens. Everyone often has a headache how to judge the status of the horizontal and vertical screens. Today Menglong will share it with you. share.

　 Use CSS to determine horizontal and vertical screen problems. The CSS code is as follows

    1、
    @media (orientation: portrait) { } 横屏
    @media (orientation: landscape) { }竖屏
    
    2、
    <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">横屏
    <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">竖屏

Copy after login

　 Use JavaScript to determine horizontal and vertical screen issues. The JavaScript code is as follows

//判断手机横竖屏状态：
function hengshuping(){
  if(window.orientation==180||window.orientation==0){
        alert("竖屏状态！")       
   }
if(window.orientation==90||window.orientation==-90){
        alert("横屏状态！")        
    }
 }
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);

//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。
从而根据实际需求而执行相应的程序。通过添加监听事件onorientationchange，进行执行就可以了。

Copy after login

The above is the actual combat and analysis of HTML5 to determine the horizontal and vertical screen functions of the mobile terminal. For more related content, please pay attention to the PHP Chinese website (www.php .cn)!