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



我开始建立我的angularjs材料移动网站。我正在采取现有的桌面网站已经建立,并使其适应移动。

我在标题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

如果你是响应式设计的新手,那么你应该从一些基础知识开始,就像在视口中一样,它意味着什么?

浏览器的视口是窗口中web内容所在的区域可以看到。这通常与呈现的页面大小不同,在在这种情况下,浏览器提供滚动条供用户滚动浏览并访问所有内容。

来源: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像素),然后一路提高。

移动优先设计是成功产品设计的关键因素。先设计最小的屏幕,然后一路向上使设计师能够专注于产品的核心功能。当你专注于产品的核心,而去掉其余部分时,您能够精确定位产品

来源: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/

如果你想要更多的参考资料等,你可以通过做一个非常简单的谷歌搜索查询,很快找到移动方法上的各种文章。

我的建议是,通过使用AngularJS Material中定义的断点来熟悉自己,如果你想应用更多的自定义样式,而AngularJS Material的本地使用是不容易实现的,那么在你自己的自定义CSS中使用相同的断点。

通过这种方式,您将学习基础知识,熟悉概念,然后,在未来,您可以开始考虑将NativeScript等内容与Angular相结合,这是您在移动应用程序开发环境中理想使用的内容。

今天,我们很高兴地宣布一种令人兴奋的新方法来构建web和使用Angular和NativeScript的移动应用程序。

首先,一些背景:自Angular开始以来,您可以使用NativeScript与Angular一起构建移动应用程序。

NativeScript是一个开源框架,用于构建真正的本地使用JavaScript的移动应用程序。它允许您使用现有的Angular技能,结果你得到了一个原生UI&iOS和安卓

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

链接到NativeScript,在这里。

快乐学习&编码!

最新更新