Zoom in with jQuery

Asked

Viewed 1,796 times

0

Have any plugin that leaves the site the size of the screen? When a site opens in resolution x, it gets that size. For example, when I open the site on TV it gets small and I want it to increase in size.

I made 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 to make this code functional?

jquery css
  • 1

    Can you explain better " let the site of the screen size " ? how so? make the site expand to use the whole screen?

  • It would not be the case to use media queries instead of javascript?

  • like when you open the site in resolution x it gets that size, like when I open the site on tv it gets small and I want it to increase in size...

  • I think you only need CSS. Media queries.

  • Whether the content is always the maximum possible or wants to define n different sizes?

  • has to be a size that respects the margins and Talz...

  • I think what you’re looking for has no way to do, the TV site doesn’t get extended because of the resolution. This will have to be done with CSS like @Sergio said

Show 2 more comments

2 answers

4

You can develop with css:

In the images you can use the 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 phone and even print page.

Example:

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

More information:

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

-4

Redirects according to resolution

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 level is the magnification scale, ai and only test which one fits best in each resolution and redirect with javascript code.

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.