0

Tem algum plugin que deixa o site do tamanho da tela? Quando um site abre na resolução x, ele fica daquele tamanho. Por exemplo, quando abro o site na TV ele fica pequeno e quero que ele aumente de tamanho.

Fiz um exemplo do que seria:

<script>
$( window ).resize(function() {
 h = $( window ).height();

 if(h >= 900){
     $('body').css("zoom", "150%");
 }

 if(h <= 899){
     $('body').css("zoom", "100%");
 }

 if(h <= 425){
     $('body').css("zoom", "50%");
 }

});
$(document).ready(function() {
 h = $( window ).height();

 if(h >= 900){
     $('body').css("zoom", "150%");
 }

 if(h <= 899){
     $('body').css("zoom", "100%");
 }

 if(h <= 425){
     $('body').css("zoom", "50%");
 }

});
</script>

Se não for um plugin, como deixar esse código funcional?

7
  • 1
    Pode explicar melhor " deixa o site do tamanho da tela " ? como assim? fazer o site expandir para usar o ecrã inteiro?
    – Sergio
    11/04/2014 às 18:13
  • Não seria o caso de usar media queries em vez de javascript?
    – bfavaretto
    11/04/2014 às 18:14
  • tipo quando abre o site na resolução x ele fica daquele tamanho, tipo quando abro o site na tv ele fica pequeno e quero que ele aumente de tamanho... 11/04/2014 às 18:15
  • Acho que precisa somente de CSS. Media queries.
    – Sergio
    11/04/2014 às 18:16
  • Quer que o conteúdo seja sempre o maximo possivel ou quer defenir n tamanhos diferentes?
    – Sergio
    11/04/2014 às 18:24

2 Respostas 2

4

Você pode desenvolver com css:

Na imagens você pode usar o Cover:

 background: url(imagem_cover.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

Já no layout tem o @media para diferente layout como tablet, celular e ate página de impressão.

Exemplo:

 @media (min-width: 700px){
   css..
 }

Mais informação:

http://www.w3.org/TR/css3-mediaqueries/
http://www.w3schools.com/css/css_mediatypes.asp

-4

Redireciona de acordo com a resolução

O javascript vai fica assim:

<script language="JavaScript">
  if (screen.width == 800 || screen.height == 600)
    window.location.replace("800600/index.php")

  else if (screen.width == 640 || screen.height == 480)
    window.location.replace("640480/index.php")

  else if (screen.width == 1024 || screen.height == 768)
    window.location.replace("1240768/index.php")

  else
    window.location.replace("1240768/index.php ")
</script>

o css fica assim:

<style>
  body {
    zoom: nivel;
    -moz-transform: scale(nivel);
  }
</style>

O css fica assim:

<style>
  body {
    zoom: nivel;
    -moz-transform: scale(nivel);
  }
</style>

Onde tem nível é a escala de ampliação, ai e só testar qual se adéqua melhor em cada resolução e redirecione com o código javascript.

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 .