CODEWITHSUNDEEP
htmlresponsive-designmobile-safariweb-deploymentmobile-website
Imnotapotato
Imnotapotato

Reputation: 5828

Is there any way to prevent a mobile to rotate my mobile responsive website?

I am working on a mobile responsive website, and I don't want it to rotate. Is there any way that I can prevent Safari from rotating?

(only for Safari! it's not a website for androids ect').

Upvotes: 1

Views: 4564

Answers (3)

Imnotapotato
Imnotapotato

Reputation: 5828

I used the CSS from one of the comments over here: How do I lock the orientation to portrait mode in a iPhone Web Application?

@media (min-width:420px){

    html{
    -webkit-transform: rotate(-90deg);
       -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
         -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
    -webkit-transform-origin: left top;
       -moz-transform-origin: left top;
        -ms-transform-origin: left top;
         -o-transform-origin: left top;
            transform-origin: left top;
    width: 320px; /*this is the iPhone screen width.*/
    position: absolute;
    top: 100%;
    left: 0
    }

/** The rest of the CSS... **/ 





}

What's less than 420px width - flip the page and display it as if it was a 320px width screen.

Upvotes: 1

vaspant
vaspant

Reputation: 65

Whene someone is rotating his mobile device the mobile's screen changes dimension. You can not prevent someone to rotate his device, but you can change your website's layout when you detect dimensions that seem to be a rotaded device's screen. This means that you can "virtually" prevent the rotation by changing the layout as it hasn't been rotated.

Upvotes: 0

Rahul Desai
Rahul Desai

Reputation: 15501

Assuming you are doing it for iPhone, refer this article.

Target the browser with body[orient="landscape"] or body[orient="portrait"]

Also refer this question/answers.

Source

Upvotes: 0

Related Questions