'Why html page loads very small on mobile screen when creating a web app using google sheets script?

I created a web app using google sheet's script editor. To test things out and to make sure I am not making any mistake. I used the code below which I took from w3schools.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Website Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap 5 Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>


</body>
</html>

Try to load it on your mobile phone.

The problem is the page loads very small on mobile phone (Its as if it is loading desktop version and tries to fit the whole page into phone screen, hence zooming out.)

However, when I load the page from the w3school website's editor on my mobile it loads perfectly fine (Responsive and mobile version). What is the issue and why is this happening? Anything to do with Google's web server? Please see the screenshots attached to see the difference. (One loaded from google server, and the other from w3school code editor)

From google script: enter image description here

From W3school: enter image description here