Check out my HTML code:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>Despite setting the viewport meta tag to scale with the device width, the content on this page is not fitting the screen properly (I noticed white borders on my Galaxy S3). I want it to fill up completely with the red background.
What steps should I take to ensure that this page fits perfectly on various screens across different devices?
I'm new to mobile development, any guidance is appreciated. Thank you!