Question

我有这个棱角分明的应用程序，我也想为移动版本添加一个响应式设计，现在它看起来很恐怖，我读到了<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes">的内容，但没有用。

在浏览器或手机上看起来像这样，如果将手机更改为水平，则可以很好地看到页面。

这是我的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>

您可以在我的github中找到存储库，或者这里是app的链接。

有趣的是，如果我将检查器中的值更改为1，将比例尺更改为1.1，它将起作用，如果将其返回至1，我将继续使用，但是在开始时，似乎被忽略。

我的问题是它看起来已切碎，尝试向右滚动也没关系，而我没有看到我的顶部导航栏。

编辑

我尝试添加媒体查询，但是我发现了一些东西，导航栏仍在那儿，我看不到，但是我可以单击按钮，看起来header-nav占用的宽度超过了设备，在下一张图片中您可以看到宽度为310 px，但清晰度的header-nav 520取值，也许这就是为什么它看起来很奇怪的原因，我认为它与项目清晰度类有关

Answer 1

除了此处的行：

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

您现在需要为要运行应用程序的每种屏幕尺寸添加一些@ media-queries。您需要将这些@ media-queries添加到CSS样式表中，以便可以调整大小。例如：

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

您可以设置min-width或min-height或要调整为横向模式等的任何内容。
More about media queries here

Answer 2

最后，我发现问题是我没有阅读整个文档以了解项目的清晰性，它们的组件已经具有通常使用@media queries的响应部分，但是事实证明我有为它们添加一些属性以使其具有响应性。

最后，我不必添加任何@media queries，也不是viewport的问题，我只是将属性[clr-nav-level]="1"添加到了标题中，修复了它。

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

这里是documentation，以备您阅读。

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

2 个答案: