Case 1: Excluding the initial-scale=1.0
The following code is presented:
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<meta name="viewport" content="width=device-width">
<style>
body {
margin: 0;
}
.header {
background: green;
color: white;
height: 2em;
}
</style>
</head>
<body>
<div class="header">
Header
</div>
<p>
Veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword
</p>
</html>
Upon opening this page with Chrome on a desktop browser, selecting Inspect, and viewing it in the mobile mode using Galaxy S5, the result shows that the <div> element does not stretch to match the width of the page.
Case 2: Including initial-scale=1.0
The code provided for this case is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<style>
body {
margin: 0;
}
.header {
background: green;
color: white;
height: 2em;
}
</style>
</head>
<body>
<div class="header">
Header
</div>
<p>
Veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword
</p>
</html>
Although initially the page appears fine, as we scroll horizontally to the right, it becomes evident that the <div> does not span across the entire width of the page.
The issue persists even when applying width: 50% to the .header in the CSS.
Pondering Question
What could be causing this discrepancy? Is there a way to rectify this so that the <div> extends fully across the page, ensuring the complete visibility of the lengthy word towards the right, even if horizontal scrolling is required?