1

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').

Imnotapotato
  • 5,308
  • 13
  • 80
  • 147

3 Answers3

1

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.

Community
  • 1
  • 1
Imnotapotato
  • 5,308
  • 13
  • 80
  • 147
  • This assumes that all devices with a width less than 420px are viewing a website in landscape orientation. However in reality this would rotate a website onto its side even when the phone is held in portrait orientation, which of course is not desirable. – Sean H Mar 01 '16 at 13:03
0

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

Community
  • 1
  • 1
Rahul Desai
  • 15,242
  • 19
  • 83
  • 138
  • I added this: `@media (max-width: 415px) { body[orient="portrait"]{ margin: 0; }` and it's still not working. Am I doing something wrong? – Imnotapotato Jan 07 '15 at 10:24
  • @Hatul Maybe try: `@media (max-width: 415px) and (orientation : portrait) { body{ margin: 0; }}` – Rahul Desai Jan 07 '15 at 10:37
0

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.

vaspant
  • 65
  • 3
  • 11
  • I'm not sure that I understand you.. You mean, for example, if I am viewing the page on more than 415px, I can leave it as is, and change the body to 415px width? So every time my page is opened on more of my max-portrait width - you get the page like it's a portrait view. – Imnotapotato Jan 07 '15 at 10:52