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. Quero clicar em um link qualquer e exibir seu conteúdo sem refresh na página. 
      <div id="box"> <a href="pagina1.php">pagina 1 </a><br> <br> <a href="pagina2.php">pagina 2 </a><br> <br> </div> <div id="conteudo"> conteudo da pagina 1 </div> ========================== esta á a pagina2.php <div id="box"> <a href="pagina1.php">pagina 1 </a><br> <br> <a href="pagina2.php">pagina 2 </a><br> <br> </div> <div id="conteudo"> conteudo da pagina 2 </div>  
    • By Biel.
      Olá pessoal. Direto ao ponto. Abaixo temos uma function. Note que ao clicar no link seu valor mostra e esconde. Até aqui tudo ok.
      Estou tentando fazer o seguinte: Quando o link for pressionado, quero imprimir em php o valor de a 
      Nota: Não é para criar button é para clicar no link mesmo. Obrigado ! 
       
      <!--<button onClick="func_1()" >botao</button>--> <a href="link1.php" onClick="func_1()">link1 </a> <br> <br> <p id="tete1"></p> <script> function func_1() { var a = 300; var teste = document.getElementById('tete1'); teste.innerHTML = a; } document.getElementById('tete1').innerHTML = a; </script>  
    • By Biel.
      Olá pessoal. Direto ao ponto. Abaixo temos func_1 e func_2. Ao clicar no botao2, gostaria que func_2 pegasse o resultado da func_1
      <p id="tete1"></p> <p id="tete2"></p> <button onclick="func_1()">botao1</button><br> <button onclick="func_2()">botao2</button> <script> function func_1() { var a = 900; document.getElementById ("tete1").innerHTML = "func_1 = " + a + "px"; } //============================================= function func_2() { var b = 200; document.getElementById ("tete2").innerHTML = "func_2 = " + b + "px"; } </script>  
    • By Biel.
      olá pessoal. Direto ao ponto. Quero fazer o seguinte:

       
      <style> *{ margin:0; padding:0; font-family: 'Trebuchet MS' , Arial, Tahoma, Verdana; } .principal{ max-width:1200px; margin:auto; padding:4px; background:#993; display: flex; flex-wrap:wrap; /*align-items: center; */ align-content: flex-start; } .esquerda{ width:200px; padding:4px; height:200px; /* 100% */ overflow:auto; background:#DDD; margin-right:10px; /*position:fixed; left:0;*/ } .direita{flex:1; padding:4px; background:#DDD; font-size:30px;} li{ list-style:none;} </style> Esta é a pagina1.php
      <div class="principal"> <div class="esquerda"> a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a <li><a href="pagina1.php">pagina 1 </a></li> a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a <li><a href="pagina2.php">pagina 2 </a></li> a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a </div> <div class="direita">...</div> este é o conteudo da pagina1 </div> </div> esta é a pagina2.php
      <div class="principal"> <div class="esquerda"> a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a <li><a href="pagina1.php">pagina 1 </a></li> a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a <li><a href="pagina2.php">pagina 2 </a></li> a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a </div> <div class="direita">...</div> este é o conteudo da pagina2 </div> </div>  
    • By Biel.
      Olá pessoal. Direto ao ponto. Abaixo temos um accordion com três paginas. pg_inicial.php  -  pg_1.php  -  pg_2.php . De inicio accordion 1 e accordion 2 está com seu conteúdo oculto.
        
      Suponha que cliquei no accordion 1. Vai exibe normalmente  a divConteudo com seu link pg_1.php ; até aqui tudo ok . O problema é que após o clique no link pg_1 a divConteudo volta a ficar oculta . Gostaria que a divConteudo  não ficasse oculta quando o link pg_1.php for clicado
      esta é a pg_inicial.php <style> .accordion { background-color: #ccc; color: #000; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size:17px; margin-bottom:1px; } .divConteudo { display:none; padding: 0 18px; background-color: white; } </style> <h2>Accordion</h2> <button class="accordion">accordion 1</button> <div class="divConteudo"> <a href="pg_1.php">pg_1</a> </div> <button class="accordion">accordion 2</button> <div class="divConteudo"> <a href="pg_2.php">pg_2</a> </div> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } </script> ...
      esta é a pg_1.php <?php include "pagina_inicial.php"; ?> este é o conteudo da pg_1.php ...
      esta é a pg_2.php <?php include "pagina_inicial.php"; ?> este é o conteudo da pg_2.php  
×

Important Information

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