I'm developing a mobile HTML web page. One of the first tags on the HTML is:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
When I examine this page on Chrome developer tools it looks just right, as I'm using mostly relative dimensions, however on the mobile device itself it looks like the UI is as twice larger then the emulation.
This is a simplified version of the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/app.css" />
<script src="./js/jquery.js"></script>
<script src="./js/utils.js"></script>
<title>Manager View</title>
</head>
<body>
<header>
<div id="burger"><img src="img/burger.png"></div>
<div id="title">Page Title</div>
<div id="logo"><img src="img/logo.jpg"></div>
</header>
<div id="main">
<table>
<tr>
<td><img src="img/icon1.png"></td>
<td><img src="img/icon2.png"></td>
</tr>
<tr>
<td><img src="img/icon3.png"></td>
<td><img src="img/icon4.png"></td>
</tr>
</table>
</div>
</body>
</html>
That's my CSS:
body{
display: flex;
flex-flow: column;
height: 100%;
overflow: hidden;
}
header {
background-color: #3465A9;
height: 7vh;
min-height: 100px;
display: flex;
flex-direction: row-reverse;
width: 100%;
color: white;
font-family: Arial;
font-size: 50pt;
min-width: 800px;
padding-bottom: 10px;
}
header #title{
line-height: 7vh;
padding-right: 50px;
}
header #burger{
height: 7vh;
min-height: 100px;
width: 7vh;
min-width: 100px;
position: relative;
}
header #burger img{
height: 80%;
min-height: 80px;
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
}
header #logo{
height: 7vh;
min-height: 100px;
width: 7vh;
min-width: 200px;
position: absolute;
left: 0px;
}
header #logo img{
height: 80%;
min-height: 80px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#main{
background: url("../img/bg.jpg");
}
#main table{
width: 80%;
table-layout:fixed;
min-width: 800px;
margin: auto;
margin-top: 20%;
}
table td{
width: 50%;
}
td img{
transform: translate(-10%, 0%);
}
Is there any way to see the actual size on Chrome Dev Tools? And how can I make sure it displays on the right size on the mobile device?
Thanks
