Is there a way to disable portrait mode?

0
Is there a way to disable portrait mode?
asked
2 answers
0

Try adding the following parameter in the config.xml:

<preference name="Orientation" value="landscape" />

 

answered
0

I don't think there's a way to really disable it, but I once saw a neat trick being applied with custom media rules in CSS that worked really nicely. It consists of two components: some HTML in the index.html file of your theme folder and some CSS added to your theme files.

In your index.html, before the </body> tag, add:
 

<div id="warning-message">
    <span>Please rotate your device</span>
</div>

 

In your CSS add:

@media only screen and (device-height: 1024px) and (device-width: 768px) and (orientation: portrait)
#content {
    display: none;
}

@media only screen and (device-height: 1024px) and (device-width: 768px) and (orientation: portrait)
#warning-message {
    display: block;
}

#warning-message {
    display: none;
}

#warning-message {
    background: url(../images/rotate_device.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 20%;
    height: 100vh;
    margin: 0 auto;
    background-color: #000;
    color: #fff;
    text-align: center;
    padding-top: 50%;
    font-size: 20px;
}

You just have to make sure to select a nice image and replace that in your CSS background url. See here for some options

Don't forget to adjust the CSS media queries to suit your needs, as this was intended for a IPad tablet.

answered