Aumentar o tamanho do conteúdo em dispositivos móveis

3 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Aumentar o tamanho do conteúdo em dispositivos móveis

Mensagem por Nier 22.05.21 9:59

Detalhes da questão


Endereço do fórum: https://signs-of-hope.forumeiros.com/
Versão do fórum: phpBB3

Descrição


Bom dia/boa tarde/boa noite.

Eu estou com um "problema" quando abro o meu fórum no celular. A parte central, onde se encontra todo o conteúdo é menor que a parte final onde mostra os grupos e quem está conectado, dando a impressão que está como se fosse um "zoom out" de computador. Há alguma maneira de melhorar esse tamanho?

Imagens em tamanho real, printadas:
Aumentar o tamanho do conteúdo em dispositivos móveis 2b3a3710

Aumentar o tamanho do conteúdo em dispositivos móveis Af350710
Nier

Nier
Nível 4

Masculino
Inscrito dia : 07/10/2019
Mensagens : 26
Pontos ativos : 46

http://signs-of-hope.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Aumentar o tamanho do conteúdo em dispositivos móveis

Mensagem por pedxz 22.05.21 11:14

Olá @Nier,

No seu overall_header (Template em Geral) localize {CSS} e em cima adicione o seguinte:
Código:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Atenciosamente,
pedxz.


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6485
Pontos ativos : 7649

Ir para o topo Ir para baixo

Tópico resolvido Re: Aumentar o tamanho do conteúdo em dispositivos móveis

Mensagem por Nier 22.05.21 20:08

Oi, não era bem isso que eu queria... Eu queria na verdade aumentar a parte central, e não diminuir a parte final.
Nier

Nier
Nível 4

Masculino
Inscrito dia : 07/10/2019
Mensagens : 26
Pontos ativos : 46

http://signs-of-hope.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Aumentar o tamanho do conteúdo em dispositivos móveis

Mensagem por Nier 23.05.21 22:18

Up...
Nier

Nier
Nível 4

Masculino
Inscrito dia : 07/10/2019
Mensagens : 26
Pontos ativos : 46

http://signs-of-hope.forumeiros.com/

Ir para o topo Ir para baixo

Membro profissional

Tópico resolvido Re: Aumentar o tamanho do conteúdo em dispositivos móveis

Mensagem por Shek 24.05.21 16:24

Boa tarde.

Pelo que compreendi, seu objetivo é diminuir o tamanho das letras, a medida que a resolução "x" é atingida? Você pode optar por usar este exemplo:
Código:
body
{
    width:1920px;
    background-color: #f8e0b3;
    height:1080px;
}

@media screen and (min-width: 500px) {
  body {
      width:420px;
  }
}

@media screen and (min-width: 800px) {
  body {
      width:720px;
  }
}
Só que, ao invés de width, a melhor forma é utilizar o font-size com o tamanho desejado. Piscada

Atenciosamente,
Shek King
Shek

Shek
Membro profissional
Membro profissional

Masculino
Inscrito dia : 11/04/2009
Mensagens : 18650
Pontos ativos : 22478

https://shiftactive.blogspot.com https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Aumentar o tamanho do conteúdo em dispositivos móveis

Mensagem por Nier 25.05.21 9:58

Não era isso... Era aumentar a resolução, como se fosse o zoom in de uma página de computador, mas no mobile.

Imagens:
Por exemplo:
Sendo assim no PC, com uma boa resolução na tela de PC

Aumentar o tamanho do conteúdo em dispositivos móveis Captur16

E algo mais assim no celular, mais "perto" da visão do jogador/leitor

Aumentar o tamanho do conteúdo em dispositivos móveis Captur17


Eu tentei aumentar pelo font-size, porém no PC fica como se fosse de fato o número que eu coloquei, e no celular fica como se fosse vários números menor. Quando aumenta para o celular ele fica absurdamente grande no PC.

No meu fórum, um RPG, há jogadores que jogam nas duas plataformas, então queria melhorar a experiência aumentando a visualização no celular, deixando maior justamente pra facilitar a leitura.
Nier

Nier
Nível 4

Masculino
Inscrito dia : 07/10/2019
Mensagens : 26
Pontos ativos : 46

http://signs-of-hope.forumeiros.com/

Ir para o topo Ir para baixo

Membro profissional

Tópico resolvido Re: Aumentar o tamanho do conteúdo em dispositivos móveis

Mensagem por Shek 26.05.21 13:22

Bom dia. Muito feliz

Presumo ter entendido. Se for o que penso, então crie um novo java script em todas as páginas, e insira este código:
Código:
$(function () {
   $(".font-button").bind("click", function () {
      var size = parseInt($('body').css("font-size"));
      if ($(this).hasClass("plus")) {
         size = size + 2;
      } else {
         size = size - 2;
         if (size <= 10) {
               size = 10;
         }
      }
      $('body').css("font-size", size);
   });
});
Logo a seguir, você poderá incluir os botões para aumentar e diminuir o tamanho da letra com esse HTML:
Código:
<a class="font-button plus">A+</a> <a class="font-button minus">A-</a>
Eu testei na versão móvel, e até que trouxe resultados interessantes. Bom para um tutorial. Mas, por favor, deixe-me saber se é isso que precisa. Piscada

Atenciosamente,
Shek King
Shek

Shek
Membro profissional
Membro profissional

Masculino
Inscrito dia : 11/04/2009
Mensagens : 18650
Pontos ativos : 22478

https://shiftactive.blogspot.com https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Aumentar o tamanho do conteúdo em dispositivos móveis

Mensagem por Nier 26.05.21 20:39

É quase isso. Tem como incluir esse botão em algum lugar do fórum, para ser universal, e não apenas em postagens?
Nier

Nier
Nível 4

Masculino
Inscrito dia : 07/10/2019
Mensagens : 26
Pontos ativos : 46

http://signs-of-hope.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro
  • 0

Tópico resolvido Re: Aumentar o tamanho do conteúdo em dispositivos móveis

Mensagem por pedxz 26.05.21 21:23

@Nier: Basta adicionar o botão em um widget ou no template Overall_header depois de:
Código:
<div id="main-content">
por exemplo Envergonhado




Todavia o senhor pode usar o seguinte código, pois ele já cria o botão em todas as páginas sem a necessidade de adicionar o mesmo:
Código:
$(function() {
  // font sizes
  var sizes = [
    8,
    9,
    10,
    11,
    12,
    13,
    14,
    15,
    16,
    17,
    18,
    19,
    20,
    21,
    22,
    23,
    24
  ],
 
  // position of the selector
  // 0 = top
  // 1 = bottom
  position = 0,
  attachTo = '#page-body, #ipbwrapper #content-container', // element(s) where the selector will be attached
 
  // language config
  lang = {
    Default : 'Default',
    FontSize : 'Font Size : '
  },
 
 
  cookie = my_getcookie('fa_fontsize'), // selected font size
 
  selector = $('<select id="fa_fontsize" />')[0], // font size selector
  container = $('<div id="fa_fontsize_container"><span id="fa_fontsize_label" style="font-size:12px">' + lang.FontSize + '</span></div>')[0], // selector container
 
  // options string
  html = '<option value="default:' + window.getComputedStyle(document.body, null).getPropertyValue('font-size') + '" ' + ( /default/i.test(cookie) ? 'selected' : '' ) + '>' + lang.Default + '</option>',
 
  // loop variables
  i = 0, j = sizes.length,
 
  // function for changing the font size
  change = function(init, val) {
    var value = init === true ? val : this.value;
 
    my_setcookie('fa_fontsize', value);
 
    document.body.style.fontSize = /default/i.test(value) ? value.replace(/default:/, '') : value + 'px';
  };
 
  // loop through the sizes array to create an options list for the selector
  for (; i < j; i++) {
    html += '<option value="' + sizes[i] + '" ' + (cookie == sizes[i] ? 'selected' : '') + '>' + sizes[i] + '</option>';
  }
 
  // apply the html and event handler to the selector
  selector.innerHTML = html;
  selector.onchange = change;
 
  // apply the chosen font size if any was selected
  if (cookie) {
    change(true, cookie);
  }
 
  // add the selector to the container and finally the document
  container.appendChild(selector);
  $(attachTo)[['prepend', 'append'][position]](container);
});


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6485
Pontos ativos : 7649

Ir para o topo Ir para baixo

Tópico resolvido Re: Aumentar o tamanho do conteúdo em dispositivos móveis

Mensagem por Nier 29.05.21 2:59

@pedxz escreveu:


Todavia o senhor pode usar o seguinte código, pois ele já cria o botão em todas as páginas sem a necessidade de adicionar o mesmo:
Código:
$(function() {
  // font sizes
  var sizes = [
    8,
    9,
    10,
    11,
    12,
    13,
    14,
    15,
    16,
    17,
    18,
    19,
    20,
    21,
    22,
    23,
    24
  ],
 
  // position of the selector
  // 0 = top
  // 1 = bottom
  position = 0,
  attachTo = '#page-body, #ipbwrapper #content-container', // element(s) where the selector will be attached
 
  // language config
  lang = {
    Default : 'Default',
    FontSize : 'Font Size : '
  },
 
 
  cookie = my_getcookie('fa_fontsize'), // selected font size
 
  selector = $('<select id="fa_fontsize" />')[0], // font size selector
  container = $('<div id="fa_fontsize_container"><span id="fa_fontsize_label" style="font-size:12px">' + lang.FontSize + '</span></div>')[0], // selector container
 
  // options string
  html = '<option value="default:' + window.getComputedStyle(document.body, null).getPropertyValue('font-size') + '" ' + ( /default/i.test(cookie) ? 'selected' : '' ) + '>' + lang.Default + '</option>',
 
  // loop variables
  i = 0, j = sizes.length,
 
  // function for changing the font size
  change = function(init, val) {
    var value = init === true ? val : this.value;
 
    my_setcookie('fa_fontsize', value);
 
    document.body.style.fontSize = /default/i.test(value) ? value.replace(/default:/, '') : value + 'px';
  };
 
  // loop through the sizes array to create an options list for the selector
  for (; i < j; i++) {
    html += '<option value="' + sizes[i] + '" ' + (cookie == sizes[i] ? 'selected' : '') + '>' + sizes[i] + '</option>';
  }
 
  // apply the html and event handler to the selector
  selector.innerHTML = html;
  selector.onchange = change;
 
  // apply the chosen font size if any was selected
  if (cookie) {
    change(true, cookie);
  }
 
  // add the selector to the container and finally the document
  container.appendChild(selector);
  $(attachTo)[['prepend', 'append'][position]](container);
});

Esse funcionou muito bem! Só mais uma pergunta: como eu faço pra aumentar o tamanho do botão?
Nier

Nier
Nível 4

Masculino
Inscrito dia : 07/10/2019
Mensagens : 26
Pontos ativos : 46

http://signs-of-hope.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro
  • 0

Tópico resolvido Re: Aumentar o tamanho do conteúdo em dispositivos móveis

Mensagem por pedxz 29.05.21 20:24

@Nier escreveu:como eu faço pra aumentar o tamanho do botão?
Ao escolher um novo tamanho para o texto, ele vai torna-se o tamanho base no fórum, seja no "botão" ou outro elemento, mas basta localizar style="font-size:12px" e alterar o 12px para o tamanho pretendido


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6485
Pontos ativos : 7649

Ir para o topo Ir para baixo

Tópico resolvido Re: Aumentar o tamanho do conteúdo em dispositivos móveis

Mensagem por Nier 01.06.21 11:03

Agora sim, ficou certo! Muito obrigado mesmo!
Nier

Nier
Nível 4

Masculino
Inscrito dia : 07/10/2019
Mensagens : 26
Pontos ativos : 46

http://signs-of-hope.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Aumentar o tamanho do conteúdo em dispositivos móveis

Mensagem por pedxz 01.06.21 12:45

Tópico resolvido


Movido para "Questões resolvidas".


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6485
Pontos ativos : 7649

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo


Permissões neste fórum
Você não pode responder aos tópicos