Search code examples
cssmetadataresponsive-designmedia-queriesviewport

How to ensure that a website fills the entire viewport? (desktop, mobile, ipad, etc.)

We currently have a website that isn't fluid/flexible (as in it doesn't change its layout depending on the viewport size).

When it's displayed on the desktop, it fills the entire screen (and is center aligned). However, trouble arises when we view it on other screen sizes like on iPhone or an iPad. The website layout looks alright, only that it doesn't fill the entire screen or somehow gets cut off on the side.

I tried using <meta name="viewport" content="width=[value]">, but it only works for one device at time (iPhone or iPad, but not both at the same time).

Is there one code to scale the website to fit in whichever viewport is being used?

Solution

  • When is comes to responsive design there are many creative ways to approach the issue at hand.

    You could try using percentages to make your Design more responsive. Using percentages is a safe bet for maximizing on the users viewport.

    eg.

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

    From there you can play with your site containers and go more specific.

    Also some JavaScript in your head section of the HTML can help you detect screen sizes and adjust different CSS rules accordingly:

    <!-- hide script from old browsers
//<![CDATA[

var windowWidth=screen.availWidth;
var windowHeight=screen.availHeight

function sniffer() {
var el=document.getElementById("body"); 
if(screen.width<=600) {
               el.style.width='100%';
               el.style.height= windowHeight;
               el.style.margin="auto";               
 } 
}
onload=sniffer;
//]]>
// end hiding script from old browsers -->

    The JavaScript above is checking if the user's screen is smaller or equal to 600px; if so, it adjusts the width, height, margin rules for the body element.

    Hope this helps!