0

tentei muitas formas e não obtive êxito. Então fui por conta própria e achei uma solução.

Gostaria de saber se posso continuar usando assim ou se terei problemas com isso...

Bem, no browser do notebook a imagem fica perfeitamente normal assim:, em um código HTML:

<img src="imagens/foto1.png">

Mas quando acesso do celular a página, fica muito grande. Tentei fazer CSS com width = 100% e auto e não funcionou (quando ficava boa no celular, não ficava no browser do notebook e vice-versa).

Aí fiz uma funçãozinha PHP que identifica se a página está sendo acessada pelo notebook ou pelo celular.

Dessa forma está funcionando perfeitamente, mas quero saber se terei problemas.

Código em PHP na página:

<?php
  if ($utilizador == "celular") { 
   echo "<img style='width:100%' src='imagens/foto1.png'>";
}
  else {
   echo "<img src='imagens/foto1.png'>";
}
?>

Dessa forma fica perfeito tanto no celular (com o width) tanto no browser do navegador, sem o width.

Posso continuar fazendo assim?

Função para verificar:

<?php
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$ipad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
$symbian =  strpos($_SERVER['HTTP_USER_AGENT'],"Symbian");

if ($iphone || $ipad || $android || $palmpre || $ipod || $berry || $symbian == true) {
    $utilizador = "celular";
}
else {
 $utilizador = "pc";
}
?>

1 Resposta 1

0

Acho desnecessário quando o CSS já oferece propriedades para isso.

Além de width, CSS também oferece max-width e min-width, ou seja, largura máxima e largura mínima. Combinando essas propriedades da seguinte forma:

<img src="pic.jpg" style="width: 100%; max-width: 500px">

Você terá uma imagem que ocupa 100% da largura de seu elemento pai, porém se essa largura for extrapolar 500px, a imagem permanece com o máximo de 500px de largura.

Dessa forma você tem a imagem ocupando a largura máximo no seu celular, mas em telas maiores a largura é limitada para não ficar com proporções exageradas.

2
  • Funcionou perfeitamente. Irei substituir a função PHP por essa! Muitíssimo obrigado!
    – Felipe
    Commented 28/05/2019 às 3:46
  • @Felipe, esqueci de mencionar, mas você também pode usar auto como max-width. Acredito que isso seria mais parecido o seu layout inicial.
    – Andre
    Commented 28/05/2019 às 4:04

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 .