0

Boa tarde,

Estou fazendo um site responsivo onde uso o CSS com media="screen" e jQuery.

Problema:
Entretanto o Javascript e o CSS não reconhecem o mesmo valor de largura do documento quando a página possui alguma barra de rolagem (quando testo no Chrome usando o Modo Design Adaptável - Ctrl + Shift + M - funciona normalmente) ou seja, funciona perfeitamente em dispositivos móveis e em outros dispositivos não, por terem a barra de rolagem.

Exemplo:
Se executar um alert ($(window).width()); para exibir a largura de um documento com barra de rolagem em um desktop com resolução de 1920/1080, vai trazer a seguinte resposta 1903 ao invés de 1920

Dúvida:
Existe alguma forma de pegar a largura da janela de um site contando com o scroll ou de fazer com que tanto o Javascript quanto o CSS reconheçam a largura do documento como sendo a mesma no desktop?

2
  • Veja o exemplo stackoverflow.com/questions/986937/…
    – KingRider
    3/08/2016 às 18:56
  • @KingRider o exemplo que você indicou também foi muito útil, foi nele que achei o 'window.innerWidth' que serviu para o que eu precisava. vlw.
    – Wesley
    4/08/2016 às 17:16

1 Resposta 1

1

Você pode resolver seu problema assim:

        $(function(){
            var hasScroll= document.body.scrollHeight > document.body.clientHeight;
            if (hasScroll) {
                // Aqui são suas definições/regras se existe a barra de rolagem
                var widthPage = ($(window).width() + 17);
                console.log(widthPage);
            }else{
                // Aqui são suas definições/regras se NÃO existe a barra de rolagem
                var widthPage = ($(window).width());
                console.log(widthPage);
            }
        });

Com isso você pega a largura da página + a largura da barra de rolagem.
Com essa solução você também verifica se existe ou não a barra de rolagem.
Espero ter ajudado.

5
  • Se eu fizer isso o problema vai para os dispositivos móveis que estão funcionando perfeitamente. e teria outro problema com as páginas sem barra de rolagem.
    – Wesley
    3/08/2016 às 20:06
  • Isso é facilmente resolvido com JS @Wesley . Atualizei minha resposta veja se te atende. 3/08/2016 às 21:15
  • Realmente funcionou, mas acabei usando o 'window.innerWidth' que no meu caso aqui funcionou tanto com barra como sem barra, e a mesma coisa para o mobile... você acha que posso deixar assim por estar funcionando ou o certo seria utilizar a sua resposta?
    – Wesley
    4/08/2016 às 12:09
  • Parece que você não precisou de validação, então sua solução é mais adequada para seu problema. 4/08/2016 às 12:34
  • Marquei sua resposta como aceita porque ela também resolve o meu problema...obrigado pela ajuda e atenção dedicada a minha dúvida.
    – Wesley
    4/08/2016 às 13:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .