Menu
Here is my HTML :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Test</title>
<style type="text/css">
body {
font-size: 40px;
}
.screen {
font-size: 0.5em;
margin: 0;
background-color: red;
position: absolute;
width: 8em;
height: 19em;
left: 0;
top: 0;
}
.screen .main {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="screen">
<div class="main">Ut enim benefici liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus.</div>
</div>
</body>
</html>Although my meta tag for the viewport scaled to device-width, this page doesn't fit the screen : there are still white borders (on my Galaxy S3). I want it to be totally red.
What do I have to do to make this page fit totally my screen ? (and most devices' screens)
I'm a total newbie in mobile development, thank you
570
So it is important to format a page to match the mobile screen's width in device-independent pixels. The “meta viewport” tag included in the <head> of the HTML document addresses this requirement. The meta viewport value as shown above helps format the entire HTML page and render the content to match any screen size.
* Tap the menu button and choose Settings from the list. * Tap on the option Advanced. * Find the Auto-fit pages – Format Web pages to fit the screen option and make sure that this is checked. Thats it!
in addition to BenM's answer, set this in your css to remove the default style from browsers
html, body {
font-size: 40px;
margin:0; /* remove default margin */
padding:0; /* remove default padding */
width:100%; /* take full browser width */
height:100%; /* take full browser height*/
}
so complete css should :
.screen {
font-size: 0.5em;
margin: 0;
background-color: red;
position: absolute;
width: 100% /* BenM mentioned this in answer*/
height: 100%; /* take full browser height */
left: 0;
top: 0;
}
.screen .main {
width: 100%; /* <--now this takes full browser dimension */
height: 100%; /* <--now this takes full browser dimension */
}
Try this
body {
margin:0;
padding:0;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
