Ignition Perspective Text Scales Only When Sized in rem Units

Why does Perspective text stay the same size on the HMI and the desktop?

A Perspective session is a web page. The browser on each device measures its viewport width in CSS pixels. The stylesheet's media queries compare that width against your thresholds and change CSS values. The label then renders whatever font size results from that chain. If the label's font size is a fixed pixel value, nothing upstream can change it. A 14 px label is 14 px on a small panel HMI and on a wide desktop monitor.

The dependable fix has three parts:

• Size text, and ideally gaps, margins, and flex basis, in rem.
• Set a default root size with html { font-size: 16px; }, so 1 rem equals 16 px.
• Add media queries in the project stylesheet that change the root font size at the widths your devices report.

Every rem-sized element then follows the root. Coordinate containers in percent mode do not solve this. They scale component boxes, but the text inside keeps its fixed size, so it clips on the small screen and looks sparse on the large one.

Does the device need a different layout, or only different text size?

Answer this first, because the tool changes with the answer.

• The HMI needs a different arrangement. Examples are fewer columns, stacked panels, or hidden trend panes. Use layout containers for this, not CSS.
  • A Breakpoint Container switches between two child views at a width threshold.
  • A Column Container reflows content across column breakpoints.
  Then continue to the text checks for the views inside those containers.
• The layout is the same and only text and spacing should scale. Skip the containers and go straight to the stylesheet approach.

Tuning font sizes cannot fix a layout that does not fit the screen. Decide on the structure first.

What viewport width does each device actually report?

Take this reading before you write any breakpoint. The width a media query sees is not always the panel's native resolution. Operating system display scaling and browser zoom both reduce the CSS pixel width. For example, a panel set to 125% scaling reports a narrower viewport than its pixel count suggests.

How to read the width:

• If the browser has developer tools: open the console on each device and read window.innerWidth.
• If the panel runs a locked-down kiosk browser: create a test class whose media query changes a label's background colour at a threshold. Move the threshold until the colour flips. That gives you the width without dev tools.

Record one width per device class. Put your breakpoint in the gap between the HMI width and the desktop width, not on either value.

Which rule is setting the label's font size right now?

Inspect a label in dev tools on a desktop session and read its computed font-size and the rule it comes from. The result tells you what to fix:

• The value comes from an inline style. A font size typed into the component's style properties wins over a class rule. Remove it, or change it to rem. Then recheck.
• The value comes from your class, but in px. Change the value to rem. The root media queries will then drive it.
• Your class does not appear on the element. Confirm the class is listed in the component's style classes property. Then compare the class name in the rendered DOM against your stylesheet selector. Perspective can render class names differently from how you typed them, so copy the exact name from the inspector.
• The value is in rem but does not change when you resize the window. The root media queries are missing or their thresholds miss the measured widths. Go back to the width readings.

There are two valid patterns:

• Per-class queries. Put the media queries inside a class and apply that class to selected labels. This works when only a few elements need to change.
• Root font-size queries. Change the root size and use rem everywhere. This scales the whole view at once. It is the better default when every screen must adapt.

How do you build the root font-size media queries?

1. In the Designer Project Browser, open the Perspective styles area and enable or open the project stylesheet.
2. Add the default root rule:

   /* Default root font size: 1rem = 16px */
   html {
     font-size: 16px;
   }

3. Add one media query per device class, using the widths you measured. The pixel thresholds and sizes below are placeholders; replace them with your own values.

   /* Placeholder thresholds: replace with measured viewport widths */
   @media screen and (max-width: 1100px) {
     html { font-size: 14px; }   /* panel HMI */
   }
   @media screen and (min-width: 1600px) {
     html { font-size: 18px; }   /* large desktop */
   }

4. Convert label font sizes to rem, for example 1rem for body text and 1.5rem for headers. Remove any inline px font sizes.
5. Convert container gap, margin, padding, and flex basis to rem, so the boxes grow and shrink with the text.
6. Save the project and reload the sessions on each device.

The root size does not have to rise steadily with width. Very small phone screens often need a larger root than tablets, or the text becomes unreadable at arm's length. Set each breakpoint by what the operator can read at that screen's viewing distance, not by a formula.

How do you verify the scaling on both devices?

1. On the desktop, drag the browser window narrower through each threshold. The computed root font-size in dev tools should step at the widths you set, and labels should step with it.
2. On the HMI panel, open the same view in a live session. Confirm it picks up the HMI root size by checking dev tools or the colour-test class.
3. Check for clipped text, wrapped headers, and overlapping components at each breakpoint. Clipping means some container dimension is still in px.
4. Test in real sessions, not only the Designer. The Designer viewport is not the panel's viewport.

Recurring pitfalls:

• A technician changes browser zoom or OS scaling on a panel, which moves it across a breakpoint.
• Built-in component elements keep their own fixed sizes and do not follow the root.
• A later edit reintroduces an inline px font size that silently overrides the class.

Lock zoom and scaling on production panels. Recheck computed styles after any view edit.

FAQ