Force the page to horizontal screen-CSS Tutorial-php.cn

Force the page to horizontal screen

PHPz

Release： 2017-04-04 13:41:26

Original

4556 people have browsed it

Recently, the company is going to develop a mobile development web game (just click on various buttons and you will find a girlfriend in the end =. =), which requires horizontal screen display, not vertical screen.
If you have experience, you will definitely know that when the user opens the screen vertically, it is very silly to be prompted that you need to turn the phone around. At this time, if the user has not turned on the landscape mode on the phone, the user will be forced to turn it on. At this time, the user has already impatiently turned off your game.
I conducted research first to see if there was any ready-made api. After referring to screen's API and manifest method, the experimental results are of course not good.
The only solution I can think of now is to write a horizontal p in portrait mode and then turn it around.

Okay, my test page structure is as follows:

<body class="webpBack">
  <p id="print">
      <p>lol</p>  
   </p>
</body>

Copy after login

It’s very simple, right? The final ideal state is to turn lol horizontally in a very harmonious way.
Okay, let’s take a look at the css that distinguishes horizontal and vertical screens:

@media screen and (orientation: portrait) {
      html{
         width : 100% ;
         height : 100% ;
          background-color: white ;
          overflow : hidden;
      }
      body{
          width : 100% ;
         height : 100% ;
         background-color: red ;
          overflow : hidden;
      }
      #print{
         position : absolute ;
         background-color: yellow ;
      }
} 
@media screen and (orientation: landscape) {
       html{
         width : 100% ;
         height : 100% ;
         background-color: white ;
      } 
       body{
          width : 100% ;
         height : 100% ;
         background-color: white ;
      }
           #print{
            position : absolute ;
            top : 0 ; 
            left : 0 ;
            width : 100% ;
            height : 100% ;
            background-color: yellow ;
         }
}
#print p{
        margin: auto ;
        margin-top : 20px ;
        text-align: center;
      }

Copy after login

To put it bluntly, the print p should be turned horizontally in portrait mode and unchanged in landscape mode. So under portrait, its width and height are not defined. It will be filled in through the following js.

  var width = document.documentElement.clientWidth;
  var height =  document.documentElement.clientHeight;
  if( width < height ){
      console.log(width + " " + height);
      $print =  $(&#39;#print&#39;);
      $print.width(height);
       $print.height(width);
      $print.css(&#39;top&#39;,  (height-width)/2 );
      $print.css(&#39;left&#39;,  0-(height-width)/2 );
      $print.css(&#39;transform&#39; , &#39;rotate(90deg)&#39;);
       $print.css(&#39;transform-origin&#39; , &#39;50% 50%&#39;);
 }

Copy after login

Here we first obtain the width and height of the available area on the screen, and then determine whether it is a horizontal or vertical screen based on the relationship between the width and height. If it is a portrait screen, set the width and height of the print p, align it, and then rotate it.
The final effect is as follows:

Force the page to horizontal screen

Vertical screen

Force the page to horizontal screen

Horizontal screen

Finally, the consequence of this is that if the rotate screen button of the user's phone is turned on, then when the phone is turned sideways, it will cause a certain tragedy. The solution is as follows:

 var evt = "onorientationchange" in window ? "orientationchange" : "resize";

    window.addEventListener(evt, function() {
        console.log(evt);
        var width = document.documentElement.clientWidth;
         var height =  document.documentElement.clientHeight;
          $print =  $(&#39;#print&#39;);
         if( width > height ){

            $print.width(width);
            $print.height(height);
            $print.css('top',  0 );
            $print.css('left',  0 );
            $print.css('transform' , 'none');
            $print.css('transform-origin' , '50% 50%');
         }
         else{
            $print.width(height);
            $print.height(width);
            $print.css('top',  (height-width)/2 );
            $print.css('left',  0-(height-width)/2 );
            $print.css('transform' , 'rotate(90deg)');
            $print.css('transform-origin' , '50% 50%');
         }

    }, false);

Copy after login

The above is the detailed content of Force the page to horizontal screen. For more information, please follow other related articles on the PHP Chinese website!