Prevent landscape orientation Mobile-website

Question

At the moment, i'm working on my site. The mobile version is almost done. But if I rotate my screen (smartphone for example) in landscape, it looks horrific. I tried to change it with queries but the result isn't quite nice. Is there a way to lock orientation so that it always stays in portrait-mode?

Edit:

I thought maybe I could do something with the height and the width. So that if the width of the screen is larger then the height, the body should rotate 90 degrees.

Blocking change of orientation is one of **the** most annoying UI tricks. — RobG, Apr 26 '17 at 12:49
Yes I added Meta-View. Media queries do not really solve the problem because the website just doesn't look good in landscape mode on Mobile-devices. On my normal pc-webbrowser, I used media-queries. — Soccerlife, Apr 26 '17 at 12:50

score 29 · Accepted Answer · answered Apr 26 '17 at 13:01

29

You need to add the following meta tag to your page header like so:

<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">

Or you can have separate CSS files for landscape and portrait mode like so:

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

answered Apr 26 '17 at 13:01

Shakti Phartiyal

6,156
3
25
46

10

The first one didn't work. Or do I something wrong? – Soccerlife Apr 26 '17 at 13:04
@Soccerlife please go through this https://benfrain.com/understanding-the-viewport-meta-tag-and-css-viewport/ – Shakti Phartiyal Apr 26 '17 at 13:05
1

@Soccerlife Is your issue resolved ? – Shakti Phartiyal Apr 26 '17 at 17:36
1

The meta-tag didn't work. But I made a different css file for both Landscape-mode and Portrait-mode. – Soccerlife Apr 28 '17 at 15:59
6

This does not work on iOS Safari. – lovelikelando May 03 '18 at 23:04
The first one did work in Android Chrome, but not in Safari – dodo254 Dec 03 '20 at 09:40
2

The meta tag does not work for me either. – MadHatter Sep 05 '21 at 11:25

Prevent landscape orientation Mobile-website

1 Answers1