Tatsächlicher HTML5-Kampf und Analyse zur Bestimmung der horizontalen und vertikalen Bildschirmfunktionen mobiler Endgeräte

Wir, die oft mit Mobiltelefonen unterwegs sind, sind oft mit den Konzepten des horizontalen Bildschirms und des vertikalen Bildschirms vertraut. Heute wird Menglong es mit Ihnen teilen.

　Verwenden Sie CSS, um horizontale und vertikale Bildschirmprobleme zu ermitteln. Der CSS-Code lautet wie folgt:

    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">竖屏

　Verwenden Sie JavaScript, um horizontale und vertikale Bildschirmprobleme zu ermitteln. Der JavaScript-Code lautet wie folgt:

//判断手机横竖屏状态：
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，进行执行就可以了。

Das Obige ist der eigentliche Kampf und die Analyse von HTML5 zur Bestimmung der horizontalen und vertikalen Bildschirmfunktionen des mobilen Endgeräts Inhalt, achten Sie bitte auf die chinesische PHP-Website (www.php.cn)!