jQuery when zoom change css function

Question

I use top: x for align an item to center of the screen.

Exemple:

div {
   top: 50%;
}

I would like a script when the screen size shrinks, to resize top: 50% by a certain percentage for example 0.2.

Exemple:

If screen size is 1920 x 1080 top: 50%; If zoom or change device with a smaller one and screen size is 320 x 480 top: 45%;

Every time when screen get smaller then 1920 x 1080 top get a value with - 0.01%

Update

I use fittext.js and now it's work fine on every device at any screen resolution. It is a very useful plugin.

score 2 · Answer 1 · answered Jun 09 '15 at 12:58

if you want to make a js solution

you have to do something linke this

$(window).resize(function() {
   $('#content').css("top", $(window).width() + somevar ); 
   //plus or minus something according to your requirments
});

$(window).trigger('resize');

score 1 · Answer 2 · answered Jun 09 '15 at 12:56

1

it can be done with media queries

@media only screen and (max-width: 1920px) {
  div {
   top: 50%;
  }
}

@media only screen and (max-width: 320px) {
  div {
   top: 45%;
  }
}

make sure you have added following in head to support media queries

<meta name="HandheldFriendly" content="True"/>
<meta name="MobileOptimized" content="320"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />

answered Jun 09 '15 at 12:56

Vikram

3,171
7
37
67

elegant answer, but I have to disagree about the meta tags - the only one required is viewport, the others apparently are legacy / proprietary tags that aren't required - more here: http://stackoverflow.com/questions/1988499/meta-tags-for-mobile-should-they-be-used – totallyNotLizards Jun 09 '15 at 13:06

score 0 · Answer 3 · edited May 23 '17 at 12:05

To answer your question as stated, you could bind an event to window.onresize which could test the window width or height, and update the CSS of your element when it hits certain thresholds.

However, a much better solution would be to center it in a way that doesn't need adjusting - not to mention that javascript should not be used to fix display issues.

A good way to do this, when you know the height of your element, is to use top:50% and a negative margin-top of half the element's height.

There are other ways too, for example see the answers to this question here on SO, or the centering in css article on CSS tricks.

jQuery when zoom change css function

Update

3 Answers3