Wie erzwingt man die Ausrichtung im Querformat auf einer mobilen Website?

Mobile Website: Ausrichtung nur im Querformat erzwingen

Wie können Sie die automatische Drehung verhindern und die Ausrichtung im Querformat auf einer mobilen Website erzwingen? Diese Frage stellt sich bei der Entwicklung einer Website mit einem „Mobile-First“-Ansatz.

Um dieses Problem anzugehen, können Medienabfragen genutzt werden. Das folgende CSS-Code-Snippet demonstriert die Implementierung:

<link rel="stylesheet" type="text/css" href="css/style_l.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">

Im bereitgestellten Code sind zwei separate Stylesheets angegeben.

• style_l.css: Dieses Stylesheet wird angewendet, wenn der Bildschirm geöffnet ist im Querformat. Es enthält die notwendigen Stile, um den Inhalt im gewünschten Querformat anzuzeigen.
• style_p.css: Dieses Stylesheet wird angewendet, wenn der Bildschirm im Hochformat angezeigt wird. Es kann verwendet werden, um bestimmte Elemente auszublenden oder zu deaktivieren oder eine Meldung anzuzeigen, die darauf hinweist, dass die App nur für den Querformatmodus konzipiert ist.

Durch die Implementierung dieses Ansatzes können Sie sicherstellen, dass Ihre mobile Website im Querformat gesperrt ist Orientierung, wodurch verhindert wird, dass Benutzer ihre Geräte versehentlich drehen und möglicherweise eine verzerrte oder unbrauchbare Schnittstelle feststellen.

Das obige ist der detaillierte Inhalt vonWie erzwingt man die Ausrichtung im Querformat auf einer mobilen Website?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!