桌面、平板与手机访问 | Mingcedar

<div class="manual-doc-article manual-doc-article-section"><h2 id="responsive-runtime">多端: 桌面、平板与手机访问</h2>

浏览器访问宿主机。管理界面随宽度调整，运行画面按工程设计呈现。

<div class="doc-card-list doc-tutorial">

<article class="doc-card">

<h3 id="responsive-runtime-item-1">连接宿主机并打开画面</h3>

<p>使用安装后提供的 Portal 地址。画面资源使用独立的 Screen 地址。</p>

<ol>

<li>在设备浏览器打开 Portal，按菜单登录要求进入画面。</li>

<li>首次访问确认 Portal 与 Screen 的地址均可解析并受信任；只打开 Portal 端口可能造成外框可见而画面为空。</li>

<li>切换屏幕方向或调整窗口后检查主画面比例；PPT 导出的固定画布按比例显示，不会自动重排工程中的设备图形。</li>

</ol>

</article>

<article class="doc-card">

<h3 id="responsive-runtime-item-2">小屏查看与操作</h3>

<p>按当前页面提供的导航、筛选与滚动方式访问内容。</p>

<ol>

<li>展开导航选择画面、报警、趋势或管理页面。表格内容较多时先使用筛选，再查看所需行。</li>

<li>报警确认、写入和服务管理仍遵循账号权限，设备尺寸不会改变授权范围。</li>

<li>返回页面后先检查更新时间、连接与质量，再执行需要当前数据的操作。</li>

</ol>

</article>

<article class="doc-card">

<h3 id="responsive-runtime-item-3">画面设计与终端适配</h3>

<p>工程中的按钮尺寸、图形密度和文字大小决定小屏可读性。</p>

<ol>

<li>手机操作可使用独立简洁画面及菜单，或响应式自写页。</li>

<li>桌面与触屏分别检查按钮、弹窗、数字输入及滚动区域；视频与浏览器音频还受终端支持和权限影响。</li>

</ol>

</article>

</div>

<div class="docs-note-grid manual-doc-image-grid">

<figure class="docs-note-card manual-doc-image-card" id="responsive-runtime-image-1" data-after-card-anchor="responsive-runtime-item-1">

<img src="/WEB_img/HQserver/current-20261025/system-status-desktop.jpg" alt="系统状态页在 1440×1100 桌面视口的布局" loading="lazy" decoding="async" />

<figcaption>

<strong>图示 1: 桌面系统状态</strong>

<p>1440×1100 桌面视口展示完整导航、服务状态和资源信息。</p>

</figcaption>

</figure>

<figure class="docs-note-card manual-doc-image-card" id="responsive-runtime-image-2" data-after-card-anchor="responsive-runtime-item-2">

<img src="/WEB_img/HQserver/current-20261025/system-status-tablet.jpg" alt="系统状态页在 820×1180 平板视口的布局" loading="lazy" decoding="async" />

<figcaption>

<strong>图示 2: 平板系统状态</strong>

<p>平板布局将导航改为横向排列，服务与资源信息按可用宽度调整。</p>

</figcaption>

</figure>

<figure class="docs-note-card manual-doc-image-card" id="responsive-runtime-image-3" data-after-card-anchor="responsive-runtime-item-2">

<img src="/WEB_img/HQserver/current-20261025/system-status-mobile.jpg" alt="系统状态页在 390×844 手机视口的布局" loading="lazy" decoding="async" />

<figcaption>

<strong>图示 3: 手机系统状态</strong>

<p>手机布局按单列展示系统状态与资源曲线，向下滚动查看运行服务。</p>

</figcaption>

</figure>

</div>

</div>