How to force a page to open always horizontally?

Asked

Viewed 2,590 times

3

My page features bugs when viewed vertically, plus it is best viewed horizontally.

Is it possible to force a page to always open horizontally on mobile devices? And stay fixed horizontal.

javascript html
  • 2

    Don’t get it, give more details? Or print?

2 answers

4


You want to disable the mobile device feature that reorients the view according to its position? That is not possible.

What you can do is adapt your layout so that it appears "without bugs" in the vertical position.

You can determine a minimum width using CSS:

#conteudo {
    min-width: 640px;
}

You can use media queries, a CSS feature to apply certain rules according to viewer characteristics, making the design page "responsive".

It is difficult to help more without seeing some image or code (preferably both).

Another crazy thing you can do is use Javascript to check if you are vertical (height > width) and, if you are, apply a CSS class to rotate the screen by 90 degrees. In this way, the user will be "forced" to keep the device horizontal to see the site "standing".

CSS class:

.virado {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

Javascript (with jQuery):

$(window).bind('resize', function() {
    if (screen.height > screen.width) {
        $('body').addClass('virado');
    } else {
        $('body').removeClass('virado');
    }
});
  • 2

    Good idea to "crazy thing". But should give a flickada in the hour that rotate from vertical to horizontal, no?

  • The way is to experiment to see. I’ve never done this - I just did a search and I saw similar suggestion in the English OS: here and here. They also suggest, instead of rotating, just display a warning that the site "only works horizontally".

  • It worked. But it only had to make one change. Where "screen.height > screen.width" is, it must be "screen.height < screen.width".

  • This flickada that the bfavaretto should be solved with my answer. It’s a copy of J. Bruni’s, but with Debounced Resize().

2

An addition to J. Bruni’s solution, which is certain is that there is a problem that always occurs with listeners in resize is that it can be fired many times per second and this can lock the screen in certain browsers, especially on desktop.

In cases like this, it’s interesting to use Debounced Resize() which is described in http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

// Plugin. Precisa ser adicionado apenas uma vez
(function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null;
          };

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100);
      };
  }
  // smartresize 
  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');

// Uso do plugin smartresize com a solução de J. Bruni
$(window).smartresize(function(){
  if (screen.height > screen.width) {
    $('body').addClass('virado');
  } else {
    $('body').removeClass('virado');
  }
});

The CSS code is the same

.virado {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.