Combat réel et analyse HTML5 pour déterminer les fonctions d'écran horizontales et verticales des terminaux mobiles

Nous qui voyageons souvent sur des téléphones mobiles, sommes souvent familiers avec les concepts d'écran horizontal et d'écran vertical. Nous avons souvent du mal à juger de l'état de l'écran horizontal et de l'écran vertical. Aujourd'hui, Menglong le partagera avec vous.

　Utilisez CSS pour déterminer les problèmes d'écran horizontal et vertical. Le code CSS est le suivant

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

　Utilisez JavaScript pour déterminer les problèmes d'écran horizontal et vertical. Le code JavaScript est le suivant

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

Ce qui précède est le combat et l'analyse réels du HTML5 pour déterminer les fonctions d'écran horizontales et verticales du terminal mobile Pour plus d'informations. contenu, veuillez faire attention au site Web PHP chinois (www .php.cn) !