Erzwingen Sie, dass die Seite horizontal angezeigt wird-CSS-Tutorial-php.cn

Erzwingen Sie, dass die Seite horizontal angezeigt wird

PHPz

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

Original

4597 Leute haben es durchsucht

Vor kurzem wird das Unternehmen ein Webspiel für die mobile Entwicklung entwickeln (klicken Sie einfach auf verschiedene Schaltflächen und Sie werden am Ende eine Freundin finden =.=), das eine horizontale und nicht vertikale Bildschirmanzeige erfordert Bildschirm.
Wenn Sie Erfahrung haben, wissen Sie bestimmt, dass es sehr albern ist, wenn der Benutzer den Bildschirm vertikal öffnet, wenn er aufgefordert wird, das Telefon umzudrehen. Wenn der Benutzer zu diesem Zeitpunkt den Querformatmodus auf dem Telefon nicht aktiviert hat, wird er gezwungen, ihn einzuschalten. Zu diesem Zeitpunkt hat der Benutzer Ihr Spiel bereits ungeduldig ausgeschaltet.
Ich habe zunächst etwas recherchiert, um zu sehen, ob es fertige APIs gibt. Nach einem Blick auf die Screen-API und die manifest-Methode sind die experimentellen Ergebnisse natürlich nicht gut.
Die einzige Lösung, die mir jetzt einfällt, ist, ein horizontales p im Hochformat zu schreiben und es dann umzudrehen.

Okay, meine Testseitenstruktur ist wie folgt:

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

Nach dem Login kopieren

Es ist ganz einfach, oder? Der endgültige ideale Zustand besteht darin, lol horizontal in eine sehr harmonische Form zu bringen Weg.
Okay, werfen wir einen Blick auf das CSS, das zwischen horizontalen und vertikalen Bildschirmen unterscheidet:

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

Nach dem Login kopieren

Um es ganz klar auszudrücken: Das Druckbild sollte im Hochformat horizontal gedreht werden, im Querformat jedoch unverändert . Unter „Hochformat“ sind Breite und Höhe also nicht definiert. Es wird über die folgenden js ausgefüllt.

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

Nach dem Login kopieren

Hier ermitteln wir zunächst die Breite und Höhe des verfügbaren Bereichs auf dem Bildschirm und bestimmen dann anhand des Verhältnisses zwischen Breite und Höhe, ob es sich um einen horizontalen oder vertikalen Bildschirm handelt. Wenn es sich um einen Hochformatbildschirm handelt, stellen Sie die Breite und Höhe des Drucks ein, richten Sie ihn aus und drehen Sie ihn dann.
Der Endeffekt ist wie folgt:

Erzwingen Sie, dass die Seite horizontal angezeigt wird

Vertikaler Bildschirm

Erzwingen Sie, dass die Seite horizontal angezeigt wird

Horizontaler Bildschirm

Die Konsequenz daraus ist schließlich, dass, wenn die Schaltfläche Bildschirm drehen auf dem Telefon des Benutzers aktiviert ist, es zu einer gewissen Tragödie kommt, wenn das Telefon zur Seite gedreht wird. Die Lösung lautet wie folgt:

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonErzwingen Sie, dass die Seite horizontal angezeigt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!