Jump to content
Biel.

extensão para redimensionar tela

Recommended Posts

Pessoal o browser firefox tem uma recurso muito interessante para redimensionar tela, onde você clica,segura e arrasta . O recurso está no menu
ferramentas-desenvolvimento web-design responsivo

 

Alguém conhece alguma extensão para google chrome que redimensione o browser semelhante o recurso que tem no firefox para redimensionar tela, onde você clica,segura e arrasta ?

Share this post


Link to post
Share on other sites

Olá Vitor, obrigado por sua dica.  Window Resizer não é prático. Melhor ainda:  Ao meu ver, toda extensão que manda você escolher tamanho de tela específica pra ver como o layout e seu conteúdo se comporta não é prático. Já imaginou você ter que ficar vendo por EX 30 ou mais resoluções de tela diferente? , só para ver como o layout e seu conteúdo se comporta em cada resolução específica? Preciso de uma extensão semelhante ao recurso que tem no firefox, mas que seja rápido, onde você clica, segura, arrasta e ver como o layout e seu conteúdo se comporta.

Nota: não uso o recurso que tem no firefox, porque é absurdamente lento ou seja não dar para desenvolver layout responsivo com uma ferramenta assim... Preciso encontrar uma extensão para google chrome onde eu possa redimensionar o browser para ver como o layout e seu conteúdo se comporta em cada resolução específica, mas que seja rápido

Share this post


Link to post
Share on other sites

Eu particularmente acho desnecessário uma ferramenta para tal finalidade.

Durante o desenvolvimento costumo fazer algo como isso:

<div id="resolucao" style="position: fixed; bottom: 0; left: 10px; padding: 10px 20px; background: black; color: white;"></div>
<script>
  var res = document.getElementById('resolucao');
  res.innerText = window.innerWidth;
  window.onresize = function () {
    res.innerText = window.innerWidth;
  };
</script>

Assim sendo, bastando arrastar o tamanho da janela do browser que a qualquer momento eu terei as dimensões da resolução.

Depois da aplicação pronta é só apagar isso e entregar para o cliente.

 

3 horas atrás, Biel. disse:

não uso o recurso que tem no firefox, porque é absurdamente lento

Não mesmo, essa ferramenta do firefox é muito eficaz o problema deve ser seu layout ou mesmo sua aplicação que usa recursos desnecessários e desorientados por isso a lentidão.

Share this post


Link to post
Share on other sites

Osmar obrigado por postar, sua dica é bem vindo. No meu computador o  browser google chrome não redimensiona pra menos de 500px e o  firefox não redimensiona para menos de 450px . No mercado já tem resolução bem menos que 500 e 450 pixels. Seu código é importante, mas para desenvolver layout responsivo ficaria limitado apenas a 500 e 450 pixels, não menos que isso por causa do browser chrome e firefox; a menos que o problema esteja no meu computador que não redimensiona o browser para menos de 500 450 pixels...

Share this post


Link to post
Share on other sites

@Biel. Entendo sua preocupação pois essa já foi a minha.

Tenha e mente que hoje em dia os browsers só redireciona até 450px aproximados em média (no Windows e MAC), pois essa a tela dos Smartfones de hoje em dia (Quem começou isso foi o browser Opera).

Veja quando eu comecei a escrever esse CSS: https://github.com/Spell-Master/sm-web/blob/master/css/sm-default.css

Eu ainda me retia a resoluções inferiores aos primeiros smartfones que no máximo atingiam 250 pixel's (que foi os primórdios da navegação web móvel), sendo que como disse hoje em dia nenhum é menor que 450px... aliás pixel não é a media usada para esse calculo e sim REM então hoje em dia o resolução mínima seria (15.625 REM)

Apesar que meu CSS padronizado que dar para desenhar 99% de um layout ainda dar suporte a resoluções menores que essa atual, então serão removidas na próxima atualização que eu fazer.

O que eu quero dizer é que não precisa calibrar x elementos para milhares de resoluções, pois você tem que pensar em que aparelho está sendo visualizado.

Porque criar algo que se adapte a um usuário que fica modificando a tela do browser é perder tempo e esforço.

 

Você deve se preocupar com o landscape (panorama) e não com a resolução.

  • Se você estiver numa resolução em média de "30 REM" aproximados quer dizer que você está vendo em um smartfone em modo retrato.
  • Se você estiver numa resolução inferior "64 REM" aproximados quer dizer que você está vendo em um smartfone em modo paisagem ou em um tablet em modo retrato.
  • Se você estiver numa resolução inferior "120 REM" aproximados quer dizer que você está vendo em um tablet em modo paisagem ou em um monitor de 24 polegadas.
  • Se você estiver numa resolução maior ou próximo a "120 REM" quer dizer que você está vendo em  em um monitor FULL-HD.
  • Fora isso você já entrou em 4K.

Share this post


Link to post
Share on other sites

Entendi Osmar. Troquei a palavra dimensão por resolução. Não estou preocupado com resolução e sim com o tamanho do aparelho. Geralmente as pessoas usam celular na vertical para ver as coisas na web. A largura do celular; olhando ele na vertical é menos que 7CM que convertido em pixels é menos que 450px.  É isso que tentei falar  no post acima, mas a palavra resolução atrapalhou um pouco. O script sugerido por você é útil, mas não serve para smartphone porque o mesmo na vertical tem dimensão menos que 7CM que convertido em pixels é menos que 450px. 

 

Nota: Preciso encontrar uma extensão para google chrome para redimensionar o browser, onde eu possa clicar,segurar e arrastar para ver como o layout e seu conteúdo se comporta em diversos tamanho de aparelhos.

 

 

Share this post


Link to post
Share on other sites

https://chrome.google.com/webstore/detail/mobile-browser-emulator/lbofcampnkjmiomohpbaihdcbjhbfepf?hl=pt-BR (Desnecessário usar o script que mencionei antes é bem mais eficaz)

 

Ou simplesmente pressione (CTRL + Shift + i) "Também usar o script é bem mais eficaz"

 

Também mas não necessariamente necessário:

Spoiler

/* 
    Media accept
    Created on : 19/10/2016, 17:30:28
    Author     : Spell Master (Omar Pautz)
*/

@media (max-width: 1024px) {
}

@media (max-width: 900px) {
}

@media (max-width: 768px) {
}

@media (max-width: 700px) {
}

@media (max-width: 600px) {
}

@media (max-width: 530px) {
}

@media (max-width: 479px) {
}

@media (max-width: 400px) {
}

@media (max-width: 320px) {
}

@media (max-width: 240px) {
}

 

 

Completando o chrome só não é o pior browser que existe porque existe o Edge e o IE. E entrando o termo "developer" esses se tornam piores ainda.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Biel.
      Olá pessoal. Direto ao ponto. Pessoal ao clicar no item1 a div aprendiz fica oculta.  Gostaria que quando item1 fosse pressionado a div aprendiz ficasse oculta e comentada. 
      Quando pedisse para exibir código fonte da página mostrasse a div aprendiz comentada assim 
      <!--<div id="aprendiz" style="border:2px solid #F05;"> div aprendiz </div>--> ...
      <form> <select name="" id="WHY" size="2" required onChange="teste()" > <option value="item1">item1</option> </select> <br /><br /> <div id="aprendiz" style="border:2px solid #F05;"> div aprendiz </div> </form> ...
      <script> var div1 = document.getElementById("aprendiz").style.display="block" ; function teste(){ var itemSelecionado = document.getElementById("WHY").value; if(itemSelecionado == "item1"){ var div1 = document.getElementById("aprendiz").style.display="none" ; } } </script>  
    • By Biel.
      Olá pessoal. Direto ao ponto. Pessoal o código abaixo está funcionando normalmente. Gostaria que javascript,ajax,jquery impedisse php apenas de atualizar a página, mas não impedisse php de executar sua própria regra if elseif exibindo normalmente inputA e inputB quando item1 e item2 for pressionado. Como faço? Obrigado.
      <form method="post"> pagina1.php <!-- <select name="itemSelecionado" required size="2" onChange="submit()"> --> <select name="itemSelecionado" required size="2" onChange="this.form.submit()"> <option value="item1">item1</option> <option value="item2">item2</option> </select> <hr /> <?php if(@$_POST['itemSelecionado']=="item1"){ ?> input A - digite qualquer coisa <input type="text" name="inputA" value="" /> <?php } elseif(@$_POST['itemSelecionado']=="item2"){ ?> input B - digite qualquer coisa <input type="text" name="inputB" value="" /> <?php }?> </form>  
    • By Biel.
      Olá pessoal. Direto ao ponto. Pessoal quero colocar os atributos html na mesma linha document, sem repetir var aluno e que funcione, como faço? Obrigado! 
      style.display="none"  disabled=true; value="aprendiz" name="joao" ...
      Ex1  <script>    var aluno = document.getElementById("id_1").style.display="none" ;   </script>        <hr />       Ex2  <script>    var tete = document.getElementById("id_1").style.display="none" ;     var tete = document.getElementById("id_1").disabled=true;  </script>  
    • By Biel.
      Direto ao ponto. Pessoal estou tentando selecionar item1 item2 ou item3  e exibir dados correspondente sem dar refresh na página. 
      Quero fazer isso com (php + ajax) ou (php + javascript) . Uns dizem que só é possível fazer isso se estiver embutido no javascript ou ajax(select cores e select meses, juntamente com input aprendiz e aluno. Muitos dizem que se não estiver embutido no javascript ou ajax (select cores e select meses, juntamente com input aprendiz e aluno não é possivel enviar sem dar refresh na página.
      <form method="post"> <select name="itemSelecionado" required size="3" onChange="this.form.submit()"> <option value="1" >item_1</option> <option value="2" >item_2</option> <option value="3" >item_3</option> </select> <?php if (@$_POST['itemSelecionado']==1){ ?> nao tem nada <?php } elseif (@$_POST['itemSelecionado']==2){ ?> item_2 - 2+2= <input type="text" name="aprendiz" value="" /> <select name="cores" required > <option >selecione a cor</option> <option >verde</option> <option >azul</option> </select> <?php } elseif(@$_POST['itemSelecionado']==3){ ?> item_3 - 3+3= <input type="text" name="aluno" value="" /> <select name="meses" required > <option >selecione o mes</option> <option >janeiro</option> <option >fevereiro</option> </select> <?php }?> </form>  
    • By Biel.
      Direto ao ponto. Pessoal estou tentando selecionar item1 item2 ou item3  e exibir dados correspondente sem dar refresh na página. 
      Quero fazer isso com (php + ajax) ou (php + javascript) . Uns dizem que só é possível fazer isso se estiver embutido no javascript ou ajax(select cores e select meses, juntamente com input aprendiz e aluno. Muitos dizem que se não estiver embutido no javascript ou ajax (select cores e select meses, juntamente com input aprendiz e aluno não é possivel enviar sem dar refresh na página.
      <form method="post"> <select name="itemSelecionado" required size="3" onChange="this.form.submit()"> <option value="1" >item_1</option> <option value="2" >item_2</option> <option value="3" >item_3</option> </select> <?php if (@$_POST['itemSelecionado']==1){ ?> nao tem nada <?php } elseif (@$_POST['itemSelecionado']==2){ ?> item_2 - 2+2= <input type="text" name="aprendiz" value="" /> <select name="cores" required > <option >selecione a cor</option> <option >verde</option> <option >azul</option> </select> <?php } elseif(@$_POST['itemSelecionado']==3){ ?> item_3 - 3+3= <input type="text" name="aluno" value="" /> <select name="meses" required > <option >selecione o mes</option> <option >janeiro</option> <option >fevereiro</option> </select> <?php }?> </form>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.