disable landscape mode

  • andy29023

    (@andy29023)


    7 years, 8 months ago

    Hi

    Im working on a site with a lot of detailed animations. I have used slider revolution to create different layouts for mobile, tablet etc and have just noticed when i rotate to landscape it obviously throws the elements all over the place

    My ideal solution is to find a way to disable landscape mode for users throughout the whole site as I havent really got time to design a whole new set of layouts for landscape!

    Does anyone know of a plugin that can do this? Alternatively some custom css? Like i say im more than happy to just not allow landscape all together

    Thanks in advance

Viewing 8 replies - 1 through 8 (of 8 total)
  • Prashant Singh

    (@prashantvatsh)

    7 years, 8 months ago

    Hi,

    Please write this meta tag

    <meta http-equiv="ScreenOrientation" content="autoRotate:disabled">

    in you header.php file just before closing </head> tag.

    Hopefully, it will help you.

    Thanks

    Thread Starter andy29023

    (@andy29023)

    7 years, 8 months ago

    Thanks so much mate, Im using a theme can i add it to the custom CSS?

    Apparently theres a plugin ‘All Meta Tags’ hopefully this should work?

    Thanks again

    • This reply was modified 7 years, 8 months ago by andy29023.
    • This reply was modified 7 years, 8 months ago by andy29023.
    Thread Starter andy29023

    (@andy29023)

    7 years, 8 months ago

    Hi mate, tried adding it to the header.php and doesnt seem to have worked

    * The header for our theme.
    *
    * Displays all of the <head> section and everything up till <div id=”content”>
    *
    * @package Composer
    */

    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <meta charset=”<?php bloginfo( ‘charset’ ); ?>”>

    <link rel=”profile” href=”http://gmpg.org/xfn/11″&gt;
    <?php composer_head(); ?>
    <link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>”>

    <?php wp_head(); ?>
    <meta http-equiv=”ScreenOrientation” content=”autoRotate:disabled”>

    </head>

    any other suggestions?

    Prashant Singh

    (@prashantvatsh)

    7 years, 8 months ago

    Ok, it is one of the suggested answers.

    No worries I have another to try:

    @media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

    Normally people say that restricting landscape is not possible but I think this code should work. If, not then I have to do something tricky for this.

    Thanks

    Prashant Singh

    (@prashantvatsh)

    7 years, 8 months ago

    There is a plugin also but it does not seem to have a solution: https://ww.wp.xz.cn/plugins/wp-mobile-detect/

    Thread Starter andy29023

    (@andy29023)

    7 years, 8 months ago

    Ah I see what you’re trying…it did rotate the screen 90 deg counter clockwise but that just meant half the screen isnt visible

    i really just want the screen to stay in the same position (in the same way if you had auto rotate disabled on your phone) wonder if thats possible?

    I will also try the plugin!

    Prashant Singh

    (@prashantvatsh)

    7 years, 8 months ago

    When you did this <meta http-equiv="ScreenOrientation" content="autoRotate:disabled"> When you did this then have you checked that if it is coming in header or not? Also try changing the positions like you can paste it at the top once to check.

    Thanks

    Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    7 years, 8 months ago

    Closing this one as it is a duplicate of: https://ww.wp.xz.cn/support/topic/disable-landscape-mode/

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘disable landscape mode’ is closed to new replies.