设计 Angularjs Material 移动网站的最佳实践 - 视口问题

Posted 2023-03-06

【中文标题】设计 Angularjs Material 移动网站的最佳实践 - 视口问题

【英文标题】：Best practices for designing an Angularjs Material mobile site - Viewport question

【发布时间】：2021-11-21 14:42:28

【问题描述】：

我开始构建我的 angularjs material 移动网站。我正在使用已经构建的现有桌面网站并使其适应移动设备。

我在标题 html 代码中添加了以下标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

刷新后，我注意到现在所有内容似乎都被放大了，字体大小也增加了。我一直在添加样式标签来手动减小字体大小，但它变得非常繁琐，而且这个网站也需要适应平板电脑。

似乎找不到任何说明如何处理此问题的最佳实践的文档。我是否想在我的meta 标签中使用intial-scale 值并降低它，直到我找到一个适用于我所有设备的最佳位置？还是我想使用 CSS 并手动降低所有组件的字体大小？

我对什么是最佳实践感到有些困惑。 AngularJS Material 网站没有提到视口问题。有人可以提供帮助或提供一些见解吗？

【参考方案1】：

AngularJS Material 可以像大多数样式框架一样使用断点。 您可以在此处找到断点的参考：https://material.angularjs.org/1.1.5/layout/introduction

如果您是响应式设计的新手，那么您应该从一些基础知识开始，例如实际上什么是视口，它是什么意思？

浏览器的视口是网页内容所在的窗口区域 看得到。这通常与渲染页面的大小不同，在 在这种情况下，浏览器提供滚动条供用户滚动 访问所有内容。

来源：https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

在您的元标记中，您定义视口行为，而您所定义的几乎就是要遵循的标准。

您的字体大小发生变化的原因很可能是因为该应用最初在没有定义视口的情况下以一种方式设置它们的样式，而现在您的视口已经定义，您会看到不同的缩放比例。

现在，我在开头提到的另一个非常重要的一点是断点，什么是断点以及我们如何使用它们？为了解决您自己的部分问题，最佳做法是什么？

如果您熟悉经典 CSS，那么断点可以称为媒体查询。

当您想要修改您的网站或应用程序时，媒体查询很有用 取决于设备的一般类型（例如打印与屏幕）或 特定的特性和参数（如屏幕分辨率或 浏览器视口宽度）。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

媒体查询用于根据给定的设备宽度（和/或高度）定义样式更改。在大多数情况下，您只需要定义宽度（这也是您在各种样式库文档中看到的引用单位，例如 AngularJS Material）。

仅按宽度定义媒体查询的例外情况是您希望非常具体地针对平板电脑。这是因为较大的平板电脑尺寸会与桌面断点发生冲突，桌面断点通常被标准化为从 960 像素开始（有时您会看到 958 像素或 959.8 像素）。

现在，什么是最佳实践？

响应式设计的最佳做法通常被称为“移动优先”方法/设计。您首先要设计您想要支持的最低屏幕分辨率（非常过时的设备为 280 像素，按照今天的标准为 320 像素），然后逐步提高。

移动优先设计是产品设计成功的关键因素。 先为最小的屏幕设计，然后再向上发展 使设计师能够专注于其产品的核心功能。 当您专注于产品的核心并剥离其余部分时， 您能够确定最重要的 UX 组件 产品。

来源：https://xd.adobe.com/ideas/process/ui-design/what-is-mobile-first-design/

额外：https://anglestudios.co.uk/blog/why-mobile-first-web-design-is-becoming-more-important/

如果您想要更多参考资料等，您可以通过非常简单的 Google 搜索查询快速找到有关移动方法的各种文章。

我的建议是，通过使用 AngularJS Material 中定义的断点来熟悉自己，如果你想应用更多的自定义样式，而这在原生使用 AngularJS Material 时不容易实现，请在你自己的自定义 CSS 中使用相同的断点。

这样，您将学习基础知识，熟悉概念，然后，在未来，您可以开始考虑将 NativeScript 与 Angular 相结合，这是您在移动设备中使用的理想选择应用开发环境。

今天，我们很高兴地宣布一种令人兴奋的新方式来构建网络和 带有 Angular 和 NativeScript 的移动应用程序。

首先，一些背景知识：从 Angular 开始，你可以使用 使用 Angular 构建移动应用程序的 NativeScript。

NativeScript 是一个用于构建真正原生的开源框架 带有 javascript 的移动应用程序。它允许您使用现有的 Angular 技能，因此您可以在 iOS 上获得原生 UI 和性能 安卓。

来源：https://blog.angular.io/apps-that-work-natively-on-the-web-and-mobile-9b26852495e7

链接到 NativeScript，here。

快乐的学习和编码！