CODEWITHSUNDEEP
androidhtmlgoogle-chromeandroid-softkeyboardprogressive-web-apps
Ricardo van Laarhoven
Ricardo van Laarhoven

Reputation: 788

In a PWA the virtual keyboard overlaps html elements, in a mobile chrome browser it doesn't

I've build my web app into a progressive web app (PWA). Everything works great except when i click on a input for typing something in the pwa the keyboard hides elements which are position fixed to the bottom. on the website viewed with chrome on android this is not a problem.

i've tried to debug this with the devtools connected to my phone, but there the keyboard doesn't appear.

Does anyone have an idee what i can do to fix this?

One of the elements with this problem:

.scanner .text-input-btn {
    position: fixed!important;
    bottom: 18vh;
    left: 50vw;
    margin-left: -28px;
}

I think it may be a bug in the google chrome's PWA launcher, i think the webview is still 100% of the device height i/o the 100% minus the height of the virtual android keyboard.

In the browser: (correct) In browser In a PWA: (wrong) In PWA

Upvotes: 8

Views: 4168

Answers (2)

hassan zarghami
hassan zarghami

Reputation: 179

you ned to set meta tag for your pwa app

if you use javascript framework like ( vuejs / reactjs / angularjs ) can use below meta code

{name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'},
    {viewport: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no',mobileAppIOS: true},
    {name: "mobile-web-app-capable", content: "yes"},
    {name: "full-screen", content: "yes"},
    {name: "browsermode", content: "application"},
    {name: "screen-orientation", content: "portrait"},

if you want can set below code to your html page

 <meta name='viewport' content= 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
  <meta viewport= 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' mobileAppIOS= true>
  <meta name="mobile-web-app-capable"  content= "yes">
  <meta name="full-screen"  content="yes">
  <meta name="browsermode"  content="application">
  <meta name="screen-orientation"  content="portrait">

Upvotes: 0

jrabello
jrabello

Reputation: 151

Take a look at your manifest.json and make sure display property is standalone, we had a couple of problems with display set to fullscreen, samsung keyboard takes the focus out of the PWA

Upvotes: 6

Related Questions