In its current form QPR Portal in QPR 2015.1.1 is not that usable on mobile devices due to missing zooming functionality. When the default pinch to zoom doesn't work, it's hard to hit smaller tap targets and/or read some content. Fortunately zooming is quite easy to enable for iPads and Android tablets with a small template modification. To get the zooming into use, do the following (NOTE: all paths assume default installation locations):
- Take a backup copy of C:\ProgramData\QPR Software\QPR 2015\2015.1\Servers\Templates\WAS\Portal\mainview.tpl
- Open C:\ProgramData\QPR Software\QPR 2015\2015.1\Servers\Templates\WAS\Portal\mainview.tpl into a text editor
- Locate the line that contains <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
- Change the line to read as follows: <meta name="viewport" content="initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.25, user-scalable=yes, width=device-width">
- Save the file and restart QPR service
Now you can zoom in and out on QPR Portal with the default pinch to zoom actions so using QPR Portal on iOS/Android tablets and even larger phones is more feasible.
BONUS: Make the experience more app-like
Some additional changes also help with making the experience more app-like on mobile devices. We can define an icon that is used when a shortcut is added to the device’s home screen and in case of Android also hide the browser controls to make QPR Portal appear like a full screen app. For iOS this functionality requires some additional changes to the product so it will not be done at this point, but the home screen icon will still work as a shortcut to opening QPR Portal in Safari.
To take these changes into use, do the following:
- Open mainview.tpl into a text editor once again.
- Add the following lines inside the <head> section. Right after the viewport definition we touched in the previous change is a good place for these:
<meta name="mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" sizes="76x76" href="<#ImageFileLocation>ipad_icon.png">
<link rel="apple-touch-icon" sizes="152x152" href="<#ImageFileLocation>ipad_icon_retina.png">
- Download an icon package from https://community.qpr.com/node/2002, unzip it and place the files in C:\inetpub\wwwroot\qpr2015-1\qprsoftware\portal\images
- Restart QPR service
Now you can select the Add to Home Screen option in Safari for iOS or Chrome for Android and have a nice icon there. In addition, in case of Android also the default browser controls get hidden and more screen real estate will be available for actual content.