Settings

显示设备（Display Devices）

“显示设备”功能用于为不同目标设备预设屏幕尺寸。
你可以使用这一功能，为同一页面创建特定设备的布局变体，无需复制页面。

作用与优势

在创建新页面时，你可以定义一个固定布局（例如 1920 × 1080 用于桌面）。
那为什么还需要配置“显示设备”呢？

→ 因为它可以让同一页面在不同设备上呈现不同布局。

通过配置显示设备，你可以：

• 在桌面端显示完整复杂的界面
• 在手机端显示精简、适配触控的小屏界面

你并没有切换页面，只是根据所选设备，切换了布局、结构和可见控件。

实际示例

1. 创建一个桌面页面（如 1920 × 1080）
2. 配置一个显示设备 iPhone 15 Pro (393 × 852)
3. 在页面编辑器左上角点击 设备图标（笔记本+手机）
4. 选择 “iPhone 15 Pro” 并重新调整该页面布局：
   • 移除不必要的控件
   • 使用更大的按钮
   • 内容重排
   • 应用触控友好的逻辑

最终结果：
一个页面，不同设备不同视图。
同一页面，根据设备自动呈现不同布局。

添加显示设备

1. 点击 +新建
2. 输入以下内容：
   • 名称（如“iPhone 15 Pro”或“WP400 7inch”）
   • 宽度（CSS 像素，例如 393）
   • 高度（CSS 像素，例如 852）
   • 可选项：最小宽度 / 最大宽度

示例数值：

• iPhone 15 Pro：393 × 852
• WP400（7 英寸，物理分辨率 1024×600）：推荐使用 480 × 800 CSS 像素

在编辑器中使用

1. 打开任何页面
2. 点击左上角的 设备图标
3. 从已创建的设备中选择一个
4. 针对该设备调整布局和控件

所有更改 仅对所选的显示设备生效，其他设备不会受到影响。

说明

• 在 PLCVisu 中实现响应式设计的核心工具
• 特别适用于以下场景：
  • 静态布局容器
  • 可缩放容器 + 针对设备优化的布局
  • 针对特定设备的逻辑与控件设置
• 避免为每种设备单独创建重复页面