Thursday, October 15, 2015

Scaling FLUID pages for iPhone 6

We are currently developing FLUID pages for a customer on PeopleSoft HCM 9.1. As they cannot benefit from the standard functionality delivered through Update Manager until they upgrade to PeopleSoft HCM 9.2, they have decided to provisionally implement FLUID through customisations.

When doing this, we have identified an issue in iPhone 6 by which the FLUID pages were not correctly scaling:



As you see, the text is barely readable. After some research, we have identified that standard pages deal with this scaling issue by using the following PeopleCode (normally in the component PostBuild event):

Declare Function GetDefaultViewportSetting PeopleCode PTLAYOUT.FUNCLIB FieldFormula;
Declare Function SetViewport PeopleCode PTLAYOUT.FUNCLIB FieldFormula;

Local string &Viewport;
Local number &Pos;

&Viewport = GetDefaultViewportSetting();

If %Request.BrowserDeviceFormFactor = 0 And
      %Request.BrowserPlatformClass = "ios" Then
   &Pos = Find("minimal-ui", &Viewport);
   If &Pos = 0 Then
      &Viewport = &Viewport | ", minimal-ui";
   End-If;
End-If;

SetViewport(&Viewport);
AddMetaTag("format-detection", "telephone=no");

The page now displays in a much better format:




2 comments:

Dan said...

Rather than explicitly calling GetDefaultViewportSetting(), I just call SetViewport with a null parameter, ie:

SetViewport("");

Within the SetViewport function, it calls GetDefaultViewportSetting(), which sets the viewport meta-tag to:

ios: "width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no";

Non-ios: "width=device-width,user-scalable=yes,initial-scale=1.0,minimum-scale=1.0"


This provides proper scaling for both iphone and android (and of course Desktop)

- Dan

Javier Delgado said...

Good point Dan. Thanks for your contribution.