视口宽度 = 设备宽度不起作用

Question

I have this angular app, and I want to add a responsive design for mobile version too, right now it looks horrible, I read about <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes"> but is not working.我有这个 angular 应用程序，我也想为移动版本添加响应式设计，现在看起来很糟糕，我读到了<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes">但不工作。

On my browser or on my phone it looks like that, if I change my phone to horizontal, I can see the page well.在我的浏览器或手机上看起来像这样，如果我将手机更改为水平，我可以很好地看到页面。

Here is my index.html这是我的索引。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 find the repository in my github or here is the link of the app .您可以在我的github中找到存储库，或者这里是应用程序的链接。

A funny thing is that if I change the value in the inspector let's say I change the scale from 1 to 1.1 it works, and if I return it to 1 I'll keep working, but at the beginning, it seems to be ignored.有趣的是，如果我更改检查器中的值，假设我将比例从 1 更改为 1.1，它可以工作，如果我将其返回 1，我将继续工作，但一开始，它似乎被忽略了。

My problem is that it looks chopped, it doesn't matter if a try to scroll to the right I don't see my top navbar.我的问题是它看起来被切碎了，如果尝试向右滚动我看不到我的顶部导航栏也没关系。

Edit编辑

I tried to add media queries, but I discovered something, my navbar is still there, I just can't see it but I can click on the buttons, and it looks like the header-nav takes more than the width of the device, in the next image you can see that the width is 310 px but the header-nav 520 from clarity takes the value of, perhaps that's why it looks weird, I'm thinking it has something to do with the project clarity classes我试图添加媒体查询，但我发现了一些东西，我的导航栏仍然存在，我只是看不到它，但我可以点击按钮，看起来 header-nav 占用的空间超过了设备的宽度，在下一张图片中，您可以看到宽度为 310 px，但来自清晰度的 header-nav 520 取值，也许这就是它看起来很奇怪的原因，我认为它与项目清晰度类有关

Answer 1

In addition to your line here:除了你的线路：

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

You need now to add some @media-queries for each size of screen you want your app to work on.您现在需要为您希望应用程序运行的每种屏幕尺寸添加一些@media-queries。 You need to add those @media-queries to your css stylesheet so that it adjusts on whatever size.您需要将这些@media-queries 添加到您的 css 样式表中，以便它可以根据任何大小进行调整。 For example:例如：

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

You can set min-width or min-height or whatever you want to adjust to landscape modes etc.您可以设置最小宽度或最小高度或您想要调整为横向模式等的任何内容。
More about media queries here 更多关于媒体查询的信息在这里

Answer 2

Ok at the end, I find out the problem was I didn't read the whole documentation for project clarity, their components already have that responsive parts that normally you would do with @media queries , but turns out I have to add some properties to them to make them responsive.好的，最后，我发现问题是我没有阅读整个文档以使项目清晰，他们的组件已经具有通常您会使用@media queries做的响应部分，但事实证明我必须添加一些属性他们让他们做出反应。

In the end, I didn't have to add any @media queries , and it wasn't a problem of the viewport , I just added the property [clr-nav-level]="1" to my header and that fixed it.最后，我不必添加任何@media queries ，这不是viewport的问题，我只是将属性[clr-nav-level]="1"添加到我的 header 并修复了它.

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

Here is the documentation in case you want to read it.这是您想要阅读的文档。

视口宽度 = 设备宽度不起作用

问题描述

2 个解决方案

解决方案1
1

解决方案2
0 已采纳 2020-04-17 12:56:03

视口宽度 = 设备宽度不起作用

问题描述

2 个解决方案

解决方案1 1

解决方案2 0 已采纳 2020-04-17 12:56:03

解决方案1
1

解决方案2
0 已采纳 2020-04-17 12:56:03