Wie kann ich Benutzer aufgefordert, sich zu drehen Gerät, wenn in einem bestimmten Modus Querformat oder hochformat, ähnlich wie GameInformer App

Ich habe eine website, die am besten im Landscape-Modus. Wie kann ich es so haben, wenn der Benutzer lädt die Webseite im landscape Modus ist es in Ordnung, aber wenn es lädt im Portrait-Modus oder Sie drehen von quer-auf Hochformat ein Bild oder etwas popups nimmt den gesamten Bildschirm fragt, ob Sie wieder zurück drehen ins Querformat? Denken Javascript/jQuery kann dies tun.

Habe ich gesehen, das mein iPad mit der Game Informer app, wo, wenn der Benutzer öffnet die app im Hochformat oder dreht von Querformat auf Hochformat ein Opakes Bild öffnet Fragen Sie, um wieder zurück drehen zu Landschaft. [siehe iPad screenshot]
Wie kann ich Benutzer aufgefordert, sich zu drehen Gerät, wenn in einem bestimmten Modus Querformat oder hochformat, ähnlich wie GameInformer App

  • Thema vielleicht überholt, aber könnte hilfreich sein, zu schauen, hier link
  • Ich verstehe dich nicht Kommentar: was macht dieses Thema obsolet? Es ist derzeit für mich relevant, und der link, den Sie zur Verfügung gestellt pleaserotate.js scheint die einfachste Lösung für meine Bedürfnisse... (Danke!)
InformationsquelleAutor SuperDistros | 2013-07-31
  1. 19

    Statt jQuery/JS kann mit Hilfe von CSS mit einem gestylten div-container statt, die nur angezeigt wird, wenn sich das Gerät im portrait-Modus.

    Können Sie fangen die Orientierung mit einer media query

    Beispiel: 

    /* for all screens */
#info {display: none;}

/* only when orientation is in portrait mode */
@media all and (orientation:portrait) {
    #info {
         display: block;
    }
}
    • funktioniert gut, danke! @mhauri
    InformationsquelleAutor Marcel Hauri
  2. 2

    Sehe ich Sie tagged die Frage mit responsive-design so dachte ich, könnte eine Lösung anbieten, die nicht erfordern Javascript und getan werden kann, nur mit CSS.

    Wissen, dass es zwei verschiedene Bildschirm-Größen beim Wechsel zwischen landscape-und portrait-Modus, können Sie mit einer media query ein-und ausblenden ein overlay:

    HTML:

    <div id="content">
    <p>Integer velit nulla, condimentum vitae risus ut, rhoncus vulputate quam. Fusce lacus elit, accumsan eu dolor vel, scelerisque pretium turpis. Vivamus ac lectus vitae enim lacinia fringilla vel id tellus. Curabitur pharetra tortor eget risus ornare scelerisque. Morbi tempus et felis vitae venenatis. Suspendisse vitae ultrices est, nec sagittis arcu.</p>
</div>

    CSS:

    #rotate {
    display: none;
}

@media screen and (max-width: 300px) {
    #rotate {
        background-color: rgba(0,0,0,0.5);
        display: block;
        height: 100%;
        position: absolute;
        top: 0;
        width: 100%;
    }
}

    All dies tut, ist zu überprüfen die verfügbare Breite und wenn es ist 300px oder weniger, wird es zeigen den Inhalt überlagert. Wenn die verfügbare Breite ist größer als 300px, wird es zu verbergen den Inhalt. Sie können diesen Wert für die verschiedenen breiten von einem mobilen Gerät zu prüfen, ob es im portrait-oder landscape-Modus.

    Können Sie testen, diese auf jsfiddle durch verschieben der vertikalen Leiste in der Mitte, um die Vorschau-Fenster größer und kleiner: http://jsfiddle.net/wv6Vp/

    • Das wird nur eine rotation box für Bildschirme kleiner als 300px. Mein iPad ist 768px Breite im hochformat, so dass Sie nicht zeigen, die rotation info, das ist, was @kevinorin gefragt. Deine Lösung ist aber besser für masking-Bildschirme sind zu klein für den Inhalt gegeben, dass ein iPhone in der Landschaft zeigen würde, eine Seite, die ein iPad im hochformat würde nicht mit der Art und Weise, die er wünscht.
    • ja, das war nur ein Beispiel, um zu helfen kevinorin, ich sagte in meiner Antwort, dass die Werte angepasst werden können und ich dies auch im Fall, dass es benötigt, um angewendet werden, um unterschiedliche breiten... gesagt haben, dass, ich wusste nicht, es war ein media query für verschiedene Ausrichtungen, so dass die akzeptierte Antwort ist ein besser auf die meinen.
    InformationsquelleAutor cchana
Schreibe einen Kommentar