Ширина области просмотра = ширина устройства не работает - PullRequest
0 голосов
/ 14 апреля 2020

У меня есть это angular приложение, и я хочу добавить адаптивный дизайн и для мобильной версии, сейчас он выглядит ужасно, я читал о <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes">, но не работает.

enter image description here

В моем браузере или на моем телефоне это выглядит так, если я переключаю свой телефон на горизонтальный, я хорошо вижу страницу.

Вот мой индекс. 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

Ответы [ 2 ]

2 голосов
/ 14 апреля 2020

В дополнение к вашей строке здесь:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes>

Теперь вам нужно добавить несколько @ media-запросов для каждого размера экрана, на котором вы хотите, чтобы ваше приложение работало. Вам необходимо добавить эти @ media-запросы в таблицу стилей css, чтобы она соответствовала любому размеру. Например:

/* iPhone 6+/7+/8+ */
@media only screen and (min-width: 414px) and (max-width: 414px) {
// adjust the elements with css
}

Вы можете установить минимальную ширину или минимальную высоту, а также все, что вы хотите настроить на ландшафтные режимы и т. Д. c.
Подробнее о медиазапросах здесь

0 голосов
/ 17 апреля 2020

Хорошо, в конце я обнаружил, что проблема в том, что я не прочитал всю документацию для ясности проекта, в их компонентах уже есть те отзывчивые части, которые вы обычно делаете с @media queries, но оказывается, что я должен добавить некоторые свойства для них, чтобы сделать их отзывчивыми.

В конце концов, мне не нужно было добавлять @media queries, и это не было проблемой viewport, я просто добавил свойство [clr-nav-level]="1" к моему заголовку, и это исправило его.

 <div class="header-nav" [clr-nav-level]="1">

Вот документация на случай, если вы захотите ее прочитать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...