Analyzing the mobile terminal landscape

Use Scene: Check the user's mobile phone, when the user's mobile phone horizontal screen, a pop prompt, click prohibited

Implementation:

Code is determined at the entrance or main.js index.html file, which ensures that each page can be detected, but to add global mask layer, can be added through inlet file index.js

By the index.html

    <style>
      .pop {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.7);
        z-index: 8888;
      }
      .pop span {
        position: absolute;
        width: 100%;
        left: 50%;
        top: 50% ; 
        Margin: Auto; 
        Color: #fff; 
        font - size: 32px; 
        text - align = left: Center; 
        Transform: Translate ( - 50 %, - 50 % ); 
      }
     </ style> 
  </ head> 
  <body> 
    <div = the above mentioned id " App " > </ div> 
    <div class = " POP " the above mentioned id = " POP " style = " Run the display: none; " > <span> in order to better your experience, hold the phone to adjust the vertical screen! </ span> <
    <!-- built files will be auto injected -->
  </body>

  <Script>
     // When rotating the mobile device performs the horizontal screen prompts 
    window.onorientationchange = function () {
       IF (window.orientation == 90 || window.orientation == - 90 ) { 
        document.getElementById ( " POP " ). =. style.display ' Block ' ; 
      } the else { 
        document.getElementById ( " POP " ) .style.display = ' none ' ; 
      } 
    } 

    // refresh time is judged
     IF (window.orientation == 90||window.orientation==-90){
      document.getElementById("pop").style.display = 'block';
    }else{
      document.getElementById("pop").style.display = 'none';
    }

  </script>

If only pop tips, can be detected on main.js Analyzing

//  // horizontal screen prompts 
window.addEventListener (
    ' onorientationchange '  in ? Window ' orientationChange ' : ' of a resize ' , 
   function () { 
     IF (window.orientation === 90 || window.orientation === - 90 ) {
        // Vue $ vux.toast.text ( 'horizontal screen page may lead to an abnormal, we recommend vertical screen operation!', 'Middle'). 
       Vue $ vux.alert.show ({. 
        title: '' , 
         Content: ' for You better experience, <br/> hold the phone to adjust the vertical screen! ' 
       }) 
     } 
     // window.location.reload();
  }, false)

Analyzing the mobile terminal landscape

Guess you like