Home > Article > Web Front-end > Force the page to horizontal screen

Force the page to horizontal screen

PHPzOriginal: 2017-04-04 13:41:264489browse

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>

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;
      }

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;);
 }

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

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!

Statement：

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

Previous article：css px automatically converted to remNext article：css px automatically converted to rem

See more

Force the page to horizontal screen

Related articles