Desktop, tablet and phone access | Mingcedar

<div class="manual-doc-article manual-doc-article-section"><h2 id="responsive-runtime">Responsive: Desktop, tablet and phone access</h2>

Access the host in a browser. Admin layouts adapt to width; runtime screens follow their project design.

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

<article class="doc-card">

<h3 id="responsive-runtime-item-1">Connect and open a screen</h3>

<p>Use the Portal address provided by the installation. Screens use a separate Screen origin.</p>

<ol>

<li>Open the Portal in the device browser and follow the menu’s sign-in requirement.</li>

<li>Confirm both Portal and Screen addresses resolve and are trusted. Access to the Portal alone can leave the shell visible with an empty screen.</li>

<li>After rotation or resizing, check screen proportions. Fixed PPT canvases scale proportionally; equipment graphics are not automatically rearranged.</li>

</ol>

</article>

<article class="doc-card">

<h3 id="responsive-runtime-item-2">Viewing and operating on smaller screens</h3>

<p>Use the navigation, filters and scrolling provided by each page.</p>

<ol>

<li>Expand navigation to choose a screen, alarms, trends or an administration page. Filter large tables before inspecting rows.</li>

<li>Alarm acknowledgement, writes and service controls retain the same account permissions on every screen size.</li>

<li>On returning to a page, check freshness, connection and quality before operations that depend on current data.</li>

</ol>

</article>

<article class="doc-card">

<h3 id="responsive-runtime-item-3">Screen design for target devices</h3>

<p>Project button sizes, graphics density and typography determine readability on smaller screens.</p>

<ol>

<li>For phones, use a dedicated compact screen and menu, or a responsive custom page.</li>

<li>Check buttons, popups, numeric inputs and scroll regions on desktop and touch devices. Video and browser audio also depend on device support and permissions.</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="System Status layout at a 1440×1100 desktop viewport" loading="lazy" decoding="async" />

<figcaption>

<strong>Figure 1: Desktop System Status</strong>

<p>The 1440×1100 desktop view shows the full navigation, service status, and resource information.</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="System Status layout at an 820×1180 tablet viewport" loading="lazy" decoding="async" />

<figcaption>

<strong>Figure 2: Tablet System Status</strong>

<p>The tablet layout moves navigation into a horizontal strip and arranges services and resources for the available width.</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="System Status layout at a 390×844 mobile viewport" loading="lazy" decoding="async" />

<figcaption>

<strong>Figure 3: Mobile System Status</strong>

<p>The phone layout stacks status and resource charts in one column. Scroll down to view running services.</p>

</figcaption>

</figure>

</div>

</div>