PWA shows very small in mobile after installation

0
0

Hi,

I had a web application, not PWA, and using the viewport meta tag it looked great in the browser on my mobile. I could also use the “Add to Homescreen” functionality, and it went and added the correct icon on the mobile’s screen and all was good.

Then I tried to use the PWA template to do the same. I created a new PWA application and added the code from my previous application. Now, when it opens on the mobile’s browser it looks OK. It also show the Install dialog and in the Chrome’s menu I can now see Install Application (instead of Add to Homescreen). When I press either the dialog or the Install Application, it statrts “installing”, showing the same as if it was an app from the Google Store. It adds the app icon on the mobiles screen, but now when I open it, everything is very small.

Any idea what might be wrong? As I said it looks perfect in the browser, but small when opened from the “installed” icon.

Best,
Alex

General
Share
  • You must to post comments
Filter
Sort by: Recently Active
0
0

Hi Levie, thanks for your answer.

It might well be my device, Xiaomi Redmi Note 4, (2017), Android 6.

But let me stress once more: while browsing to the url, it looks correct. (browsing.png)

before using the PWA template, but just a “normal” web application, the Chrome menu gave me the choice to “Add to Home screen” (addToHomeScreen.png), it detected correctly the manifest and added the icon on the home screen and everything was fine, it looked like the browsing.png

After using the PWA template, Chrome shows the “install application” panel at the bottom, and the prompt in the Chrome menu has changed to “Install the Application”. When I do either of the two (install panel or chrome menu), it runs some kind of “installation”, as if this was an apk downloaded from the Google Play Store. It adds the icon on the screen and then, when I open it is all small. (afterInstallationResult.png). The Chrome menu has changed to “Open application” (afterInstallationMenu.png) and when I select that, it goes and “runs” the “installed” application, which has the same (small) result as if I tapped on the application icon.

In fact, I do not need the PWA features, but the prompt to the user to install is much better experience than telling them to open the Chrome menu and select “add to the home screen”.

Hope it’s clear. As I sait it can well be my old device. But the same device respects the viewport setting when an “added to homescreen”, while it does not for an “installed” app. Strange!
Now I’m thinking about it, could it be that the “installed” application is not opened by Chrome but by the default Xiaomi Mi browser?

All the best,

Alex

Attachment
addToHomeScreen.png browsing.png afterInstallationResult.png afterInstallationMenu.png
  • Levie (ITG)
    Can you send your viewport here? I’m not sure if it’s opened by the default browser. Does Xiaomi Mi respect the viewport when used normally? Best, Levie
  • Alex Prinias
    meta name=”viewport” content=”width=device-width, initial-scale=1.0″ Yesterday I installed it on another (newer) Android device and it shows alright, so I suspect it has to do with my device. However, there, the install panel never showed up, I did the installation through the Chrome top-right menu. And it did not go through the “Google-Play-Store-like” installation I saw on my Xiaomi device. It’s all so strange, it looks like each device/browser/android version has its own behaviour… which is not very encouraging. Alex
  • You must to post comments
0
0

Hi Alex,

I just tried adding the default PWA sample to the device’s home screen and the text looks fine on my iOS and Android devices. Any chance for a small sample? What device are you using?

Best,

Levie

  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.