Zooming the site with jQuery

Question

Zooming the site with jQuery

Navigation

#1 by (4 votes)
#2 by (-4 votes)

0

Is there a plugin that leaves the site the size of the screen? When a site opens at x resolution, it stays that size. For example, when I open the site on TV it gets small and I want it to grow in size.

I gave an example of what it would be:

<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>

If it is not a plugin, how do you leave this functional code?

jquery css

asked by anonymous 11.04.2014 / 20:11

2 answers

Change radio button properties from select on select Resizable does not work in dynamic image

score 4 · Answer 1

You can develop with css:

In the images you can use 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;

Already in the layout has the @media for different layout like tablet, mobile and even print page.

Example:

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

More information:

link
link

score -4 · Answer 2

Redirect according to resolution

The javascript will look like this:

<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>

The css looks like this:

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

Where the scale is the magnification scale, then just test which fits best with each resolution and redirect it with the javascript code.