У меня есть это angular приложение, и я хочу добавить адаптивный дизайн и для мобильной версии, сейчас он выглядит ужасно, я читал о <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes">
, но не работает.
![enter image description here](https://i.stack.imgur.com/55MPR.png)
В моем браузере или на моем телефоне это выглядит так, если я переключаю свой телефон на горизонтальный, я хорошо вижу страницу.
Вот мой индекс. 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>
Вы можете найти репозиторий в моем github или по ссылке app .
Забавная вещь в том, что если я изменяю значение в инспекторе, скажем, я изменяю масштаб с 1 на 1.1, он работает, и если я возвращаю его на 1, я продолжаю работать, но в начале это, кажется, игнорируется.
Моя проблема в том, что он выглядит рубленым, не имеет значения, если попытаться прокрутить вправо, я не вижу свою верхнюю панель навигации.
Редактировать
Я пытался добавить медиа-запросы, но что-то обнаружил, моя навигационная панель все еще там, я просто не вижу ее, но я могу нажимать на кнопки, и это выглядит как e header-nav занимает больше, чем ширина устройства, на следующем изображении вы можете видеть, что ширина равна 310 px, но header-nav 520 для ясности принимает значение, возможно, именно поэтому это выглядит странно, я думая, что это как-то связано с классами ясности проекта
![enter image description here](https://i.stack.imgur.com/cMCPh.png)