CODEWITHSUNDEEP
cssorientationlandscapeportrait
Adam Bell
Adam Bell

Reputation: 1045

Trying to force landscape mode on devices only using CSS

Having an issue with the homepage I'm currently trying to complete for this site (http://purcraft.com/madeinla/home5.html) where due to the aspect ratio, I want to make certain this gets forced into landscape mode. Not ideal, but it just will leave a ton of white space in portrait.

Heard you could do this using CSS3 but this code isn't working perfectly. On devices, it seems to stretch the div out a bit when you're in portrait and on a desktop, you see the effect once you hit 1280px. Very odd. How can I really make this work or should I just use some JavaScript instead?

Here's the CSS I'm currently using:

@media only screen and (orientation:portrait){
    #made-in-la-canvas {  
        display:block;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}
@media only screen and (orientation:landscape){
    #made-in-la-canvas {
        display:block;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

Upvotes: 0

Views: 1393

Answers (1)

DDPWNAGE
DDPWNAGE

Reputation: 1443

If I were a web designer, I wouldn't force landscape or portrait onto people. I would instead account for portrait in your site's interface. I don't think Mobile Safari can be forced in landscape, because some users can simply turn on Portrait Orientation Lock through Control Center.

Upvotes: 1

Related Questions