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. enter image description here

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

Add Comment
0 Answer(s)

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.