我有这个有角度的应用程序，我也想为移动版本添加响应式设计，现在它看起来很糟糕，我读过有关<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes">但不起作用。在我的浏览器或手机上看起来是这样的，如果我将手机更改为水平，我可以很好地看到页面。这是我的index.html<!DOCTYPE html><html><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 中找到该存储库，或者这里是应用程序的链接 a>.有趣的是，如果我更改检查器中的值，假设我将比例从 1 更改为 1.1，它会起作用，如果我将其返回到 1，我将继续工作，但在一开始，它似乎被忽略了。我的问题是它看起来被切碎了，如果尝试向右滚动我看不到顶部导航栏也没关系。
2 回答
小怪兽爱吃肉
TA贡献1852条经验 获得超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 或任何您想要调整为横向模式等的内容。
牛魔王的故事
TA贡献1830条经验 获得超3个赞
最后，我发现问题是我没有阅读整个文档以了解项目的清晰度，它们的组件已经具有通常您会使用的响应部分@media queries，但事实证明我必须向它们添加一些属性才能使它们响应。
最后我没有加任何@media queries，也不是viewport的问题，我刚刚将属性 [clr-nav-level]="1" 添加到我的标题中并修复了它。
<div class="header-nav" [clr-nav-level]="1">
- 2 回答
- 0 关注
- 54 浏览
添加回答
举报
0/150
提交
取消