使用 Angular 的 NativeScript 的平板电脑支持
对于我的一个应用程序，我有两个平板电脑需求需要在一个通用应用程序（一个二进制文件）中满足。
- 拆分视图，其中“主”和“详细”并排显示。
- 自定义样式（更大的文字、按钮、填充等）。
让我向您展示我的方法是如何解决这两个问题的，并且请不要犹豫在评论区分享您的想法！
1. 拆分视图
让我们首先看一下最终结果，看看我们想要实现什么。下面左边是手机，右边是平板电脑，两者都运行着同一个 POS（销售点）应用程序。
第一页是您库存中所有产品的概述，加载在一个 ListView (性能很棒！) 中。用户（商店老板）可以将顾客的商品添加到购物车，完成后导航到购物车并（例如）应用折扣。
在手机上，我们在商品页面的底部添加了一个小的购物车栏，而在平板电脑上，我们希望购物车始终可见。
请原谅到处都是荷兰语 🇳🇱 文本，我们目前正在对应用程序进行国际化，但这还没有准备好。
| iPhone 7 | iPad Pro 9.7 |
|---|---|
 |
 |
下面的拆分视图示例更像是传统的“主-详情”设置。在第一页，我们有客户之前创建的订单（无论是在网站上还是在实体店中，通过此应用程序），选择一个订单后，将显示其详细信息。
请注意，在平板电脑上，我们稍微突出显示了选定的订单（箭头颜色发生了变化，可能有点太细微了），当订单状态发生变化时（由底部的绿色按钮触发），它也会反映在主列表中（文本变为红色）。
 |
 |
这些动画非常棒，但有点令人眼花缭乱 🤢，所以让我们将其分解为静态图像，这样我们就可以将噪音从我们的视窗中滚动出去，并以更轻松的方式理解这个拆分视图。
| 主 | 详情 | 主 + 详情内容 |
|---|---|---|
 |
 |
 |
在手机上（左边的两张图片），我们有两个物理视图——标记为“主”和“详情”。“详情内容”区域是一个单独的组件，我们已经提取出来，以便可以重复使用它。在平板电脑上，我们只使用“主”视图，并将“详情内容”组件添加到右侧。
为了在“主”视图中条件渲染第二列，我们首先需要知道我们当前是否在平板电脑上运行。幸运的是，NativeScript 在这方面帮助了我们。
有了这些知识，我们可以构建一个视图，支持手机上的主-详情导航和平板电脑上的拆分视图。
所以基本上，我们有条件地在平板电脑上渲染一个第二 GridLayout 列，可以在其中显示内容，并且我们使用“*, *”均匀地分配屏幕空间。如果您需要左侧窗格使用不同的宽度，可以尝试一下：”240, *"或 "*, auto"。
在“主”视图中选择一个项目后，您的控制器会将选定的项目添加到某个共享类，该类既供“主”组件也供“详情内容”组件访问（通常是 Angular 的服务类。并且只有在手机上，您才会导航到“详情”视图。
2. 自定义样式
平板电脑通常比手机离眼睛更远，所以您可能想要加强一些东西，比如字体大小。所以让我们看一下如何在平板电脑上使一个标签看起来更大一些。
请记住，我们需要在运行时动态地执行此操作，因为我们只构建一个二进制文件，所以我们不能只是将一个额外的样式表添加到我们的构建中，然后就完成了。
2.1 全局应用样式
首先，在您现有的“app.css”旁边添加一个文件“app.tablet.css”。然后将您希望在平板电脑上以不同方式显示的任何样式类从 app.css 复制过来。请注意，app.css 仍然会首先被应用，所以这就像在浏览器中一样，app.tablet.css 加载在 app.css 之后，有效地覆盖了类似的类定义。
现在打开“app.module.ts”，并将以下代码添加到构造函数中。
2.2 组件特定样式
这有点难，因为浏览器样式覆盖不适用于组件。在您现有的“my-component.css”旁边添加一个文件“my-component.tablet.css”。然后通过在您的平板电脑样式前面添加“.tablet”来覆盖其中的任何样式。
现在打开“my-component.ts”，并且**不要**将该文件添加到您的@Component styleUrls 声明中，因为这样会无条件地应用这些平板电脑样式。
所以，我们需要有条件地将“tablet”类添加到页面的根元素，以便上面的“.tablet”前缀被拾取，并加载特定于平板电脑的 css 文件。
虽然这一切对我的应用程序和我的用例来说非常有效，但我相信还有其他巧妙的方法可以重复使用应用程序逻辑来支持多种设备分辨率。例如，如果您需要更精细地控制何时应用拆分视图或样式，您可以监听屏幕旋转事件并在运行时查询屏幕分辨率。
一如既往，请随时在评论区与世界分享您的技巧！