Problem in creating fixed layout [closed]

3

Well, I'm having trouble creating a fixed layout f that fits only the height or width of the screen, be it the phone or the desktop. But it's not a responsive site, it's a normal site for desktop , not for mobile version, but when I open here on my cell phone, it gets some parts out of the layout or under rodape , I can not find where I'm going wrong .

This is the site:

link

I think the problem is in the configuration of the body or the div "everything" or even some div that is passing from the screen and therefore is large and not adapting.

Here's the site in the repository, if anyone wants to take a look at what's happening.

link

    
asked by anonymous 05.06.2015 / 23:58

2 answers

0

I have a look at the super fast code, the layout is a bit strange. But it's easy to solve. It works with wrapper (100%) set with container-fixed within each section with size of resolution you want to answer ex: 960px .

The correct would be to work with relative measures and creation of breakpoints with mediaqueries. But the start within what you want is this.

Take a look at the basics so you have an idea: link

    
11.07.2015 / 13:16
0

One strategy you can use in this case is to dynamically correct the height and width of the page so that they are always equal to the height and width of the device screen, respectively.

To do this, place the following code inside the <script type="text/javascript"> block in the index.php file:

var corrigirTamanhoDaPagina = function() {
    // Ajusta a largura da página para ficar igual à largura 
    // da tela do dispositivo (celular, tablet ou pc).
    $("body").css("width", $(document).width() + "px");

    // Ajusta a altura da página para ficar igual à altura da tela do dispositivo.
    $("#div-content").css("height", $(document).height() + "px");
};

// Irá corrigir o tamanho da página assim que ela for carregada.
$(document).ready(function() {
    corrigirTamanhoDaPagina();
});

// Faz com que o tamanho da página seja corrigido sempre que a tela mudar de tamanho, 
// por exemplo quando o celular muda do modo paisagem para retrato e vice versa.
$(window).resize(function() {
    corrigirTamanhoDaPagina(); 
});
    
11.07.2015 / 16:23