0

I am making a responsive site based on percentages. I have included the viewport tag as follows

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

and the html and body tags are as follows:

 html {
       width:100%;
       height:100%;
       margin:0;
      }

 body {
      width:100%;
      height:100%;
      margin:0;
      }

and other elements take their sizes from there. Everything looks fine in Chrome emulator tools and I based my CSS on how things looked there (foolish?), but when I test on actual devices I my design breaks because the mobile browser ui elements (url bar sliding in and out etc) cause me problems. For example, on Android devices, on scroll up and down, the window size constantly changes and on ios it seems to stay static at the original height even after the url bar slides out. This might help readers understand better.

The following snippet 

 alert( 'Your screen resolution is ' + screen.width + 'x' + screen.height );
 var h = $( window ).height();
 alert(h);
 $(window).resize(function() {
 var newh = $( window ).height();
 alert(newh);
 });

tested on a iPhone 4 (ios7), an Asus Nexus 7 (Lollipop), and a Samsung Galaxy S-Plus (Android 2.3) gives me the following results:

 iPhone: 320x480, 372 and no change then on resize.
 Nexus: 601x962, 785, 881. (96px differential)
 Galaxy-S Plus: 320x452 (measures screen height less ui initially?), 452, 508.

After getting tumbleweed (maybe unclear?) on this here
Is there a way to prevent viewport resizing due to ui elements like url bar? I am still stumped.

Community
  • 1
  • 1
Inkers
  • 219
  • 7
  • 27
  • Maybe you want to have a look at [viewport units](http://css-tricks.com/viewport-sized-typography/), [depending on what browsers you need to support](http://caniuse.com/#feat=viewport-units) – Nico O Dec 05 '14 at 15:35
  • OK, so after quickly reading http://www.weareconvoy.com/2014/07/24/css-vw-and-vh-units-are-they-worth-using-yet/ I am still unsure of the benefits of vh as opposed to percentage. Isn't {height: 100%} the same as {height:100vh;}? I see that it may be useful in sizing fonts, if this is what you are suggesting? – Inkers Dec 05 '14 at 16:06
  • The biggest advantage is, that you can use it everywhere and you don't need to inherit the height/width through your elements. You basically can make a container the size of the viewport anywhere in your html. I thought you could ditch your Javascript in favour to that. But this depeds on what you want to do. – Nico O Dec 05 '14 at 16:17
  • I know it is from '14 but... In your case (and mine, too) height: 100% and 100vh is the same thing, the real problem is that address bar on Chrome. Did you ever find any solutions to this? – Paula Fleck Feb 03 '16 at 11:27
  • No sorry Paula, never did... I just changed tack! If you come across a solution, I would still be interested in the answer. – Inkers Feb 03 '16 at 13:14

0 Answers0