44
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
2023-08-28 07-00-10
Paulo Torres
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!

2023-10-21 19-42-11
Tousif Khan
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

UserImage.jpg
Andy_Oscky

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


2022-01-29 23-03-17
Paulo Solipa
Champion

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

UserImage.jpg
Andy_Oscky

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"      }   }}



2022-01-29 23-03-17
Paulo Solipa
Champion

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

UserImage.jpg
Andy_Oscky

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


2022-01-29 23-03-17
Paulo Solipa
Champion

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.