设计 Angularjs Material 移动网站的最佳实践 - 视口问题
Best practices for designing an Angularjs Material mobile site - Viewport question
我开始构建我的 angularjs material 移动网站。我正在使用一个已经构建的现有桌面网站并使其响应移动设备。
我在 header HTML 代码中添加了以下标签：
<meta name="viewport" content="width=device-width, initial-scale=1">
刷新后，我注意到现在一切似乎都被放大了，字体大小也增加了。我一直在添加样式标签以手动减小字体大小，但它变得非常乏味，而且这个网站也需要适应平板电脑。
似乎找不到任何说明如何处理此问题的最佳实践的文档。我是否应该在我的 meta 标签中使用 intial-scale 值并降低它直到找到适合我所有设备的最佳点？或者我应该玩 CSS 并手动减小所有组件的字体大小？
我对这方面的最佳做法有些困惑。 AngularJS Material 网站没有提及视口问题。谁能提供帮助或提供一些见解？
AngularJS Material 与大多数样式框架一样使用断点。
您可以在此处找到断点的参考：https://material.angularjs.org/1.1.5/layout/introduction
如果您是响应式设计的新手，那么您应该从一些基础知识开始，例如什么是视口，它是什么意思？
The browser's viewport is the area of the window in which web content
can be seen. This is often not the same size as the rendered page, in
which case the browser provides scrollbars for the user to scroll
around and access all the content.
来源：https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
在您的元标记中，您定义了视口行为，并且您定义的几乎是要遵循的标准。
您的字体大小发生变化的原因很可能是因为该应用程序最初在没有定义视口的情况下以一种方式设置它们的样式，现在您的视口已经定义，您会看到不同的缩放比例。
现在，我在开头提到的另一个非常重要的点是断点，什么是断点以及我们如何使用它们？为了解决您自己的问题的一部分，最佳做法是什么？
如果您熟悉经典CSS，那么断点可以称为媒体查询。
Media queries are useful when you want to modify your site or app
depending on a device's general type (such as print vs. screen) or
specific characteristics and parameters (such as screen resolution or
browser viewport width).
来源：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
媒体查询用于根据给定的设备宽度（and/or 高度）定义样式更改。在大多数情况下，您可以单独使用宽度定义（这也是您在各种样式库文档中看到的引用单位，例如 AngularJS Material）。
仅按宽度定义媒体查询的例外情况是您希望针对平板电脑非常具体。这是因为较大的平板电脑尺寸会与桌面断点发生冲突，桌面断点通常标准化为从 960 像素开始（有时您会看到 958 像素或 959.8 像素）。
现在，什么是最佳实践？
响应式设计的最佳实践通常被称为“移动优先”approach/design。您首先设计您想要支持的最低屏幕分辨率（非常过时的设备为 280 像素，按照今天的标准为 320 像素），然后逐步提高。
Mobile-first design is a key ingredient to successful product design.
Designing for the smallest screens first, and then working your way up
empowers designers to focus on the core functions of their product.
When you focus on the core of your product and strip away the rest,
you are able to pinpoint the most important UX components of the
product.
来源：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 中定义的断点来熟悉自己，如果您想应用，则在您自己的自定义 CSS 中使用相同的断点更多自定义样式，原生使用 AngularJS Material.
不容易实现
通过这种方式，您将学习基础知识，熟悉概念，然后，在未来，您可以开始考虑将 NativeScript 之类的东西与 Angular 相结合，这就是您想要的最好在移动应用程序开发环境中使用。
Today we’re happy to announce an exciting new way to build web and
mobile apps with Angular and NativeScript.
First, some background: since the beginning of Angular, you could use
NativeScript with Angular to build mobile apps.
NativeScript is an open source framework for building truly native
mobile apps with JavaScript. It lets you use your existing Angular
skills, and as a result you get a native UI & performance on iOS and
Android.
来源：https://blog.angular.io/apps-that-work-natively-on-the-web-and-mobile-9b26852495e7
Link 到 NativeScript，here.
祝您学习愉快！
我开始构建我的 angularjs material 移动网站。我正在使用一个已经构建的现有桌面网站并使其响应移动设备。
我在 header HTML 代码中添加了以下标签：
<meta name="viewport" content="width=device-width, initial-scale=1">
刷新后，我注意到现在一切似乎都被放大了，字体大小也增加了。我一直在添加样式标签以手动减小字体大小，但它变得非常乏味，而且这个网站也需要适应平板电脑。
似乎找不到任何说明如何处理此问题的最佳实践的文档。我是否应该在我的 meta 标签中使用 intial-scale 值并降低它直到找到适合我所有设备的最佳点？或者我应该玩 CSS 并手动减小所有组件的字体大小？
我对这方面的最佳做法有些困惑。 AngularJS Material 网站没有提及视口问题。谁能提供帮助或提供一些见解？
AngularJS Material 与大多数样式框架一样使用断点。 您可以在此处找到断点的参考：https://material.angularjs.org/1.1.5/layout/introduction
如果您是响应式设计的新手，那么您应该从一些基础知识开始，例如什么是视口，它是什么意思？
The browser's viewport is the area of the window in which web content can be seen. This is often not the same size as the rendered page, in which case the browser provides scrollbars for the user to scroll around and access all the content.
来源：https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
在您的元标记中，您定义了视口行为，并且您定义的几乎是要遵循的标准。
您的字体大小发生变化的原因很可能是因为该应用程序最初在没有定义视口的情况下以一种方式设置它们的样式，现在您的视口已经定义，您会看到不同的缩放比例。
现在，我在开头提到的另一个非常重要的点是断点，什么是断点以及我们如何使用它们？为了解决您自己的问题的一部分，最佳做法是什么？
如果您熟悉经典CSS，那么断点可以称为媒体查询。
Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).
来源：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
媒体查询用于根据给定的设备宽度（and/or 高度）定义样式更改。在大多数情况下，您可以单独使用宽度定义（这也是您在各种样式库文档中看到的引用单位，例如 AngularJS Material）。
仅按宽度定义媒体查询的例外情况是您希望针对平板电脑非常具体。这是因为较大的平板电脑尺寸会与桌面断点发生冲突，桌面断点通常标准化为从 960 像素开始（有时您会看到 958 像素或 959.8 像素）。
现在，什么是最佳实践？
响应式设计的最佳实践通常被称为“移动优先”approach/design。您首先设计您想要支持的最低屏幕分辨率（非常过时的设备为 280 像素，按照今天的标准为 320 像素），然后逐步提高。
Mobile-first design is a key ingredient to successful product design. Designing for the smallest screens first, and then working your way up empowers designers to focus on the core functions of their product. When you focus on the core of your product and strip away the rest, you are able to pinpoint the most important UX components of the product.
来源：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 中定义的断点来熟悉自己，如果您想应用，则在您自己的自定义 CSS 中使用相同的断点更多自定义样式，原生使用 AngularJS Material.
不容易实现通过这种方式，您将学习基础知识，熟悉概念，然后，在未来，您可以开始考虑将 NativeScript 之类的东西与 Angular 相结合，这就是您想要的最好在移动应用程序开发环境中使用。
Today we’re happy to announce an exciting new way to build web and mobile apps with Angular and NativeScript.
First, some background: since the beginning of Angular, you could use NativeScript with Angular to build mobile apps.
NativeScript is an open source framework for building truly native mobile apps with JavaScript. It lets you use your existing Angular skills, and as a result you get a native UI & performance on iOS and Android.
来源：https://blog.angular.io/apps-that-work-natively-on-the-web-and-mobile-9b26852495e7
Link 到 NativeScript，here.
祝您学习愉快！