1

O trecho abaixo é similar ao que tenho na pagina inicial do site:

<div class="text-center">
    <div id="minhaClass">
        <a href="<?php echo get_site_url(); ?>/texto-1/">texto 1</a>
       <a href="<?php echo get_site_url(); ?>/texto-2/">texto 2</a>
        <a href="<?php echo get_site_url(); ?>/texto-3/">texto 3</a>
     </div>
</div>

Nesse codigo tem php e html, a minha duvida é sobre quais funções do jquery posso estudar para possibilitar imprimir esse trecho no código dependendo do tamanho do dispositivo (desktop, celular, etc) usado?

Sei que é possivel usar @media queries como referencia ao carregar, mas como capturo isso com o jquery, quais funções possibilitam isso

3
  • Como assim "imprimir esse trecho no código"? Quer que essa div só exista no código-fonte da página em um certo tipo de dispositivo? Não há Javascript no mundo que faça isso. Commented 26/09/2017 às 21:35
  • Agradeço resposta, mas acredito ser possivel, sobre imprimir acho que pode usar o .append(), depois de uma condicional que verifica o tamanho do dispositivo usado
    – Gislef
    Commented 26/09/2017 às 21:42
  • 1
    A questão é como capturo o tamanho do dispositivo, ao carregar a página, pelo DOM
    – Gislef
    Commented 26/09/2017 às 21:44

2 Respostas 2

1

Você não precisa de jQuery. Com Javascript puro você consegue acessar o objeto screen da variável global window e obter a resolução da tela, i.e.:

console.log('Minha resolução é ' + screen.width + 'x' + screen.height);

Note que isso é a resolução do dispositivo. A área realmente visível da sua página, com o navegador maximizado, será quase sempre um pouco menor.

Agora, lembre-se sempre:

  • Resolução não é tamanho. Um tablet ou mesmo um celular high end podem ter a mesma resolução de um monitor antigo, em uma tela menor;

  • Nunca tente determinar o tipo do dispositivo pela resolução de sua tela. Hoje existem ecrãs grandes que são sensíveis a toque, por exemplo, então você pode servir-lhes interfaces amigáveis. Caso deseje realmente segregar seu conteúdo por dispositivos diferentes, trate-os por capacidades, não por resolução (nem por useragent). Eu tenho algumas respostas mais elaboradas sobre o assunto em algumas perguntas anteriores:

Identificar se o dispositivo é pc ou celular e utilizar um código diferente pra cada

Executar javascript apenas quando acessar o site de um celular

Como detectar um dispositivo móvel em Javascript?

1
  • 1
    if (screen.width < 640 || screen.height < 480) { // sirva a versão pra celular }... Obrigada Renan, é exatamente isso
    – Gislef
    Commented 26/09/2017 às 22:07
0

Com Jquery tem como vc capturar o tamanho da viewport com o código:

$( window ).width(); e $( window ).height();

Ainda não está muito claro o que você deseja fazer, mas creio q se vc utilizar esta forma para buscar a largura e a altura atual da sua viewport, vc possa fazer os calculos que deseja.

4
  • Usar jQuery para obter esses valores é como usar um tiro de escopeta para matar uma mosca. Além disso esse é o tamanho da janela, não a resolução do dispositivo. Commented 26/09/2017 às 21:48
  • Eu apenas respondi o q ele perguntou. Ele quis saber como capturar o tamanho por Jquery, E foi o q respondi. Tem milhares de maneiras de fazer isso, e tudo depende do que o usuário prefere. Eu particularmente prefiro utilizar frameworks com grids. Mas como não sei o q ele quer fazer, então passei o q ele pediu. O código retorna o tamanho da janela que está sendo exibida, independente do tamanho do dispositivo, o que pode ser bastante útil em alguns casos. Ai depende dele. Commented 26/09/2017 às 22:34
  • @FernandoVR Agradeço pela sua resposta também, muito obrigada
    – Gislef
    Commented 26/09/2017 às 23:50
  • Disponha @Gislef ^_^ Commented 28/09/2017 às 13:46

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 .