29
Views
9
Comments
PWA how set css phone
Application Type
Traditional Web, Mobile, Reactive, Service


Hi guys can anyone help me, how i set this body class in my pwa app


i wana set this configuration in pwa 

is-ltr windows portrait phone 


Thanks

Captura.JPG
Champion

Hi,

Better to put this class (body) in your theme and change, adding these class's you want.

Or maybe with JS would me more easy!

Champion

Hello

If you want to know how to add a class, add a on ready action add a JS node to your flow

and you can add a code:

document.body.classList.add("ptr-refresh");

Thanks
Tousif Khan

it not working, i want to use landscape phone, i wanna make this display as default


Hi @Andy_Oscky .

Please add this to your extensibility configurations:

{"PWAManifest":{"orientation": "landscape"}}

Uninstall the pwa from you phone and reinstall it again.
The pwa will be locked to landscape.

Cheers,

Paulo Solipa

I wanna use this configuration by default and disable maximize from bar

this is my configuration

{    "PWAManifest":{       "orientation": "landscape",      "display_override": ["fullscreen", "minimal-ui"],      "display": "standalone",      "serviceworker":{          "src":"/TMW/Scripts/pwaServiceWorker.js"      }   }}



Hi Andy.

For that you will need to add something to the content attribute for the viewport meta tag.

Please use this:
document.querySelector('[name=viewport]').setAttribute('content', document.querySelector('[name=viewport]').getAttribute('content') + ', user-scalable=no')

Cheers,

Paulo Solipa

nothing is working 


it try with this

document.querySelector('body').setAttribute('class','is-ltr windows portrait phone');

document.querySelector('[name=viewport]').setAttribute('content', 'viewport-fit=cover, width=device-width, initial-scale=1');

{    "PWAManifest":{       "orientation": "landscape",      "display_override": ["fullscreen", "minimal-ui"],      "display": "standalone",      "serviceworker":{          "src":"/TMW/Scripts/pwaServiceWorker.js"      }   }}

and always can maximize the pwa , i want to use like this by default


Did you tried my solution?


Cheers,

Paulo Solipa

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.