ViewPort Meta tag definition confusion
Can anyone explain what width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova || htmlWebpackPlugin.options.ctx.mode.capacitor) { %>, viewport-fit=cover<% } %> means in below meta tag.
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova || htmlWebpackPlugin.options.ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
I have always used:
<meta name="viewport" content="viewport-fit=cover, initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
The first meta tag is causing issue in my ios application in notch and footer area as shown below.I am getting this transparent blank space.
If I use second meta tag. The blank space are gone but the header moves to the notch.
Please suggest what should I do to fix it. NOTE: App is working fine in android.
Thank You