视口宽度=设备宽度不起作用
我有这个有角度的应用程序，我也想为移动版本添加响应式设计，现在它看起来很糟糕，我读过有关<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，我将继续工作，但在一开始，它似乎被忽略了。
我的问题是它看起来被切碎了，如果尝试向右滚动我看不到顶部导航栏也没关系。
慕田峪91588502回答
-
小怪兽爱吃肉
除了您的行之外：<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 或任何您想要调整为横向模式等的内容。 -
牛魔王的故事
最后，我发现问题是我没有阅读整个文档以了解项目的清晰度，它们的组件已经具有通常您会使用的响应部分@media queries，但事实证明我必须向它们添加一些属性才能使它们响应。最后我没有加任何@media queries，也不是viewport的问题，我刚刚将属性 [clr-nav-level]="1" 添加到我的标题中并修复了它。 <div class="header-nav" [clr-nav-level]="1">
随时随地看视频慕课网APP
相关分类
Html5