Question: I have designed a page where four `div` tags are there in the page. If I test the page in mobile phone (5 inch) it fits the page perfectly, If I test the same page in tablet the page fits with in 30% of the screen. So how can I set the `div` size so that it will fit for all type of screens.

[Fiddle link](http://jsfiddle.net/Ramaganiprasad/e0j9gjjy/)

HTML:

```
  <div class="bubble0" align="center">
     <h3>Three  Levels </h3> 
  </div>
  <div class="bubble"  align="center"> </div><br/><br/>
  <div class="bubble1" align="center"> </div><br/><br/>
  <div class="bubble2" align="center"> </div><br/><br/>
  <button>Play</button>

```

Any suggestions please,

Answer: 
You question is a bit unclear as to what you want, but judging from your comments, I assume you want *each* bubble to cover the screen, both vertically and horizontally. In that case, the vertical part is the tricky part.

As many others have answered, you first need to make sure that you are setting the viewport meta tag to trigger mobile devices to use their "ideal" viewport instead of the emulated "desktop width" viewport. The easiest and most fool proof version of this tag is as follows:

```
<meta name="viewport" content="width=device-width, initial-scale=1">

```

Source: PPK, probably the leading expert on how this stuff works. (See <http://quirksmode.org/presentations/Spring2014/viewports_jqueryeu.pdf>).

Essentially, the above makes sure that media queries and CSS measurements correspond to the ideal display of a virtual "point" on any given device — instead of shrinking pages to work with non-optimized desktop layouts. You don't need to understand the details of it, but it's important.

Now that we have a correct (non-faked) mobile viewport to work with, adjusting to the height of the viewport is still a tricky subject. Generally, web pages are fine to expand vertically, but not horizontally. So when you set `height: 100%` on something, that measurement has to relate to something else. At the topmost level, this is the size of the HTML element. But when the HTML element is taller than the screen (and expands to contain the contents), your measurements in percentages will be screwed up.

Enter the `vh` unit: it works like percentages, but works in relation to the viewport, not the containing block. MDN info page here: <https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths>

Using that unit works just like you'd expect:

`.bubble { height: 100vh; } /* be as tall as the viewport height. Done. */`

It works on a lot of browsers (IE9 and up, modern Firefox, Safari, Chrome, Opera etc) but not all (support info here: <http://caniuse.com/#search=vh>). The downside in the browsers where it does work is that there is a massive bug in iOS6-7 that makes this technique unusable for this very case (details here: <https://github.com/scottjehl/Device-Bugs/issues/36>). It will be fixed in iOS8 though.

Depending on the HTML structure of your project, you *may* get away with using `height: 100%` on each element that is supposed to be as tall as the screen, as long as the following conditions are met:

1. The element is a direct child element of `<body>`.
2. Both the `html` and `body` elements have a 100% height set.

I have used that technique in the past, but it was long ago and I'm not sure it works on most mobile devices. Try it and see.

The next choice is to use a JavaScript helper to resize your elements to fit the viewport. Either a polyfill fixing the `vh` issues or something else altogether. Sadly, not every layout is doable in CSS.
Try giving your divs a width of `100%`.