Disable landscape-mode for mobile devices

Question

Hi there i created a responsive mobile website using this:

max-width(480px) {etc..} 

+

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

For every mobile device the website looks the same => great.

But when i change to landscape there is more than 480px and the website-variation of the desktop displays.

Is there any possibility to disable the auto-rotate or to show the portrait-mode on mobile-device even if there is more than 480px?

Greetings

Please don't use `maximum-scale=1, user-scalable=no`. It provides a poor user experience and is not recommended. — Paulie_D, Jul 02 '14 at 15:41
`!important` in front of max-width css ,may be it will help you out. — LearningAsp, Jul 02 '14 at 15:41

score 2 · Answer 1 · answered Jul 02 '14 at 15:43

2

You can try and target specific orientation with your media query:

@media max-width(600px) and (orientation: landscape) {
    rules for landscaped devices...
}

More on media queries:

answered Jul 02 '14 at 15:43

Josh KG

in your case: i switch to landscape on mobile device => i get desktop-variation on mobile screen :( – user3683881 Jul 02 '14 at 15:47
I forgot you also need the max-width, try the update. – Josh KG Jul 02 '14 at 15:48

score 0 · Answer 2 · answered Jul 02 '14 at 15:38

0

Change your media query to a higher value?

max-width(600px) {etc..}

answered Jul 02 '14 at 15:38

Steve Sanders

yea i thought about it, but using this i could catch tablet´s etc you know? – user3683881 Jul 02 '14 at 15:39
This is really your only option. There are thousands of possible device sizes, you have to draw the line somewhere. For example, the Samsung Galaxy Note 3 phone reports a width of 540px in portrait mode. Right now, they would be seeing the desktop version of your site. – Steve Sanders Jul 02 '14 at 15:44

2 Answers2