Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Atribuir variáveis PHP conforme a largura da tela

27-05-2016 12:36

Estou adaptando o meu código web para uma versão para dispositivos móveis, e desejo que, na paginação de resultados, de até 3 colunas, conforme a largura da tela, ou sua orientação (retrato ou paisagem) seja exibida uma coluna, ou duas colunas, ou até três colunas, atribuindo-se, conforme a largura da tela, valores diferentes a uma variável, para a exibição de forma diferente do número de colunas da paginação. Tenho pesquisado a respeito, encontrado algumas sugestões, que ainda não consegui implementar. A maioria em sites estrangeiros através da busca pelo Google, pelo qual também traduzo as páginas. Pelo que tenho visto, o PHP não é capaz de captar a largura da tela, devendo ser usado media queries, em CSS, ou se utilizando JavaScript ou jQuery, mas tenho dificuldade em coordenar o PHP com as outras linguagens utilizadas. Tenho salvo os links das páginas, feito testes, mas não sei se devo publicá-los, para não entupir o post com códigos muitas vezes imprestáveis. Pode-se dar uma dica de como posso fazer isso, para eu ir testando e comparando com as "soluções" quem encontrei (e que não consegui implementar)? Grato.
0
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Atribuir variáveis PHP conforme a largura da tela

27-05-2016 15:34

Consegui encontrar um código que funciona, utilizando JavaScript.

Este é o código JavaScript:

<script type="text/javascript"> if(window.innerHeight > window.innerWidth){ var landscapeOrPortrait = 'portrait'; } else { var landscapeOrPortrait = 'landscape'; } var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; window.location.replace('index2.php?width='+width+'&height='+height+'&landscapeOrPortrait='+landscapeOrPortrait); </script>

E este é o código PHP:

$window_width = "<script type='text/javascript'>document.write(window.innerWidth);</script>";

O link para a página em que o encontrei é este: http://stackoverflow.com/questions/8459 ... n-with-php.

Talvez eu poste por conta de eventual dificuldade com tentativas de adaptação.

Grato.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Atribuir variáveis PHP conforme a largura da tela

27-05-2016 18:55

Sem problema.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Atribuir variáveis PHP conforme a largura da tela

27-05-2016 19:24

Mas há algo errado com o código que postei acima, se trabalhado com o meu. Há a medição da largura, mas a variável PHP que criei para comparação não reconhece o valor da variável PHP que recebe o valor a partir do JavaScript. Estou quase descartando esse código. Continuo pesquisando.

Encontrei um código bem simples, que adaptei, conforme abaixo. Ele reconhece a largura nas duas orientações, retrato e paisagem, mas não automaticamente. Testei on line em meu celular. Se acesso a página na orientação retrato, ele captura a sua largura; mas se deito o celular, não é lida a nova largura. E se acesso na orientação paisagem, ele captura a sua largura; mas se coloco o celular de pé, a nova largura não é capturada. Parece que falta algum evento.

Este é o código do arquivo index.php:

<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="js.js"></script> </head> <body> <?php $window_width = "<script type=\"text/javascript\">document.write(window.innerWidth);</script>"; echo $window_width; echo "&nbsp;-&nbsp;"; echo "variável window_width"; echo "<br>"; ?> </body> </html>

E este é o código do arquivo js.js:

<?php header('Content-Type: application/javascript');?> var w = 0; if (window.innerWidth) w = window.innerWidth; else if (document.all) w = document.body.clientWidth; if (w < 380) { document.write("less than 380"); } else { document.write("more than 380"); }

Você tem ideia de como posso melhorar esse código, inserindo o evento para as larguras serem reconhecidas automaticamente ao se mudar a orientação do dispositivo? Ou tem outra sugestão de como posso fazer isso? Eu continuo pesquisando.

Grato.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Atribuir variáveis PHP conforme a largura da tela

27-05-2016 20:11

Não sei se é o padrão, mas você pode tentar esse script em jQuery

<script src="jquery.js"></script> <script> $( window ).resize(function() { // SUA DEFINIÇÃO AQUI }); </script>

Esse código identifica tanto mudança no tamanho da janela do navegador quanto a mudança do celular de retrato para paisagem.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Atribuir variáveis PHP conforme a largura da tela

27-05-2016 20:39

Obrigado. Fiz o teste com o código abaixo, que conta quantas vezes a janela foi redimensionada. É deste link: http://www.w3schools.com/jquery/event_resize.asp.

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> x = 0; $(document).ready(function(){ $(window).resize(function(){ $("span").text(x += 1); }); }); </script> </head> <body> <p>Window resized <span>0</span> times.</p> <p>Try resizing your browser window.</p> </body> </html>

O evento eu encontrei. Agora, preciso saber como obtenho a largura de cada janela e coordenar isso com o PHP.

No código que você postou, posso inserir, dentro, este JavaScript, que é do código que postei acima?

var w = 0; if (window.innerWidth) w = window.innerWidth; else if (document.all) w = document.body.clientWidth; if (w < 380) { document.write("less than 380"); } else { document.write("more than 380"); }

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Atribuir variáveis PHP conforme a largura da tela

28-05-2016 10:46

Você pode usar esse exemplo:

<script src="jquery.js"></script> <script> $( window ).resize(function() { var w = 0; if (window.innerWidth) w = window.innerWidth; else if (document.all) w = document.body.clientWidth; if (w < 380) { $("#resultado").load("retrato.php"); } else { $("#resultado").load("paisagem.php"); } }); </script> <div id="resultado"></div>

Quando a largura for menor que 380 carrega na div o documento retrato.php
Quando a largura for maior ou igual que 380 carrega na div o documento paisagem.php
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Atribuir variáveis PHP conforme a largura da tela

06-07-2016 09:38

Olá! Grato. Desculpe. Não abandonei o post. Resolvi retirar o HTML de dentro do código PHP e estou realizando essa tarefa. Creio que poderia estar interferindo na execução dos scripts que testei. Quando concluir, voltarei ao post, para tentar implementar isso novamente. Obrigado pela força.
1
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Atribuir variáveis PHP conforme a largura da tela

01-10-2016 10:13

Olá! Refiz o código, separando o HTML do PHP e vou testar o exemplo que você sugeriu por último.
0
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Atribuir variáveis PHP conforme a largura da tela

01-10-2016 12:08

Estou testando seu último exemplo, de 28/06/2016 às 11h46, ele está funcionando, mas não exibe o conteúdo da página retrato.php ou paisagem.php quando o arquivo que as chama e que contém o código é carregado, somente ao se rotacionar o dispositivo, seja pelo computador, usando a ferramenta de modo de design responsivo do Firefox; seja pelo próprio celular. Isso está correto? O que se tem de fazer para que o conteúdo de uma das páginas seja exibido conforme a orientação da tela ao se carregar a página e antes de rotacioná-la?

Como exibo a largura do dispositivo?

Inseri o código abaixo nos arquivos retrato.php e paisagem.php, mas a largura não é informada:

<script> document.write("largura" + w); </script>

Os códigos de testes são estes:

Arquivo teste.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- Teste de codigo do link: http://www.codigosnaweb.com/forum/viewtopic.php?f=1&t=9841&p=33530#p33530 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script src="jquery.js"></script> </head> <body> <script src="jquery.js"></script> <script> $( window ).resize(function() { var w = 0; if (window.innerWidth) w = window.innerWidth; else if (document.all) w = document.body.clientWidth; if (w < 380) { $("#resultado").load("retrato.php"); } else { $("#resultado").load("paisagem.php"); } }); </script> <div id="resultado"></div> </body> </html>

Arquivo retrato.php:

<?php header("Content-Type: text/html; charset=ISO-8859-1",true); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <script> document.write("largura" + w); </script> <br> <p> <?php echo "Teste de exibição da página no formato RETRATO"; ?> </p> </body> </html>

Arquivo paisagem.php:

<?php header("Content-Type: text/html; charset=ISO-8859-1",true); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <script> document.write("largura" + w); </script> <br> <p> <?php echo "Teste de exibição da página no formato PAISAGEM"; ?> </p> </body> </html>

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Atribuir variáveis PHP conforme a largura da tela

01-10-2016 19:04

Na segunda dou uma testada. Estou sem PC agora.
0
A melhor hospedagem para o seu site HostGator!
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Atribuir variáveis PHP conforme a largura da tela

03-10-2016 19:55

Baseado no exemplo que postei você tem que disparar o evento em alguma ação.
Se no caso precisa do evento no carregamento da página tem que substituir a linha:

$(window).resize(function() {

Por essa

$(document).ready(function() {

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado