My angular app desperately needs a mobile responsive design as it currently looks dreadful on mobile devices. I've tried adding
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes">https://i.sstatic.net/55MPR.png
Whether viewed on my browser or phone, the layout seems off. Interestingly, when I switch my phone to horizontal mode, the page displays correctly.
Below is an excerpt from my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Cv</title>
<base href="/" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes">
<link rel="icon" type="image/x-icon" href="resumePhoto.png" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<app-root></app-root>
</body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/7.13.2/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="/__/firebase/7.13.2/firebase-analytics.js"></script>
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>
</html>
You can access the repository on my GitHub, or directly visit the app.
An interesting observation is that tweaking the scale value in the inspector (e.g., changing from 1 to 1.1) sometimes fixes the issue temporarily. However, at the outset, it appears to be ignored entirely.
The main problem lies in the chopped appearance of the layout. Even attempting to scroll right doesn't reveal the top navbar.
Edit
I attempted to incorporate media queries but discovered something peculiar - although the navbar is present, it remains invisible. Surprisingly, I can still interact with the buttons, implying that the header-nav extends beyond the device width. The image below illustrates this discrepancy where the width measures 310px while the header-nav from clarity occupies 520px, leading to the bizarre display. This could potentially be attributed to the project clarity classes.