Perspective App on iOS zoom/scaling options with CSS

Ignition
1

Hi, I have a perspective application I've developed for a customer that is first in a breakpoint container, then in an XY container. It is formatted for 1920x1080 or larger desktops. The idea was to then use the breakpoint to make a more mobile friendly version. However, if I could find a way to launch the view in a mobile browser at 50% zoom or some zoom/scale control equivalent to that it would work quite nicely on mobile without redoing everything for mobile. Since it includes a massive layout of piping/ P&ID drawing around everything it was not realistic to design in a way to simply reflow for mobile. Mobile users are all iOS, and I would like to use the Perspective App rather than Safari on iOS for it's added features. Safari does let you specific a specific zoom for a specific web page, which for now I have set at 50% and that does work quite nicely. But for new users, less configuration on the client side is better.

Here is one of my ideas, use a CSS function injected in an Advanced Stylesheet or alongside the default CSS on the gateway the looks only at Perspective App sessions and loads at 50% of normal size, then allows normal pinch upsizing from there, and if you reset it goes back to the 50% size.

I realize there is a lot of variables here, I don't know what browswer the Perspective App is running, but I assume it is basically the embedded Safari option Apple is tough with. Also, that zoom is something CSS isn't supposed to have 100% control over, and such like. And that there might not be a simple transform that renders text and all correctly.

A good option here will help me a lot! Any CSS knowledge I've learned since working with perspective, the learner curve has felt steep, but at least I have a SCADA software that has options rather than running against limitations.

2

I have my doubts that this really is good enough, but if your client finds it good enough (or doesnt want to pay for something better...)

you can put something like this in the advanced stylesheet

if screen width is <=550px (small devices/phones), apply zoom 50% to everything. This is not quite the same zoom as the browser does though.

@media (width <= 550px) {
  html{
      zoom:50%
  }
}

text will get smaller with this...

3

Could I apply an over arching text size increase then with the same "small screen" filter to compensate?

I understand your concern of it being good enough. But for now, the money goes here till they decide it isn't good enough.

4 
@media (width <= 550px) {
  html{
      zoom:50%;
      font-size:200%;
  }
}

This can cause text to become to big for certain components though. And it can fail if you assigned any other specific font sizes to something.
If you did you will have to copy the selector for the specific text in here too with a new value

5

Indeed, the zoom:50% gives me what I want on the graphics. However, I have many places I specified 14px without any style just on a label, etc. Or I have quite a few styles that carry font sizing as well, the same way: 10px for example.

Can you shed any light on how I would handle that? I assume the styles would already be specific, but the direct component font sizing (is that in line styling?) would be different?

I could move to all sizing done by styles.

6

you will probably have to move all that to a class

example: a font named bigHeader14 in your own created stylefolder named fonts

  .psc-fonts\/bigHeader14{
  font-size: 14px;
  }

and for the zoomed one if needed:

@media (width <= 550px) {
  html{
      zoom:50%;
      font-size:200%;
  }
  .psc-fonts\/bigHeader14{
      font-size: 28px;
  }
}