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

Home

Web Front-end

H5 Tutorial

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

黄舟

Feb 10, 2017 pm 02:34 PM

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)!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn