Can't make "viewport initial scale = 1" work on mobile

Need help Responsiveness
1

I made a web app of 505 px width, 505 because I didn’t want to spend time on responsiveness.
But I need viewport to work so that it fits mobile when loaded.

I added the following code to both Metatags on Settings and Page Settings but pages keep loading on default mobile view (like zoomed-in in my case) on mobile.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Thanks for the help.

Thank you.

2

What code did you add?

3

I haven’t specified it’s a code on markdown so it didn’t show up. I corrected the initial topic post.

4

I think you need to set minimum-scale=1.0 in that meta tag too, so it doesn’t zoom out.

5

@makingthingsapp apparently viewport doesn’t work when the view is set to Fixed.

I solved the issue by adding the following code on Metatags:

<meta name="viewport" content="width=505">
<script>viewportElement.setAttribute( 'content', 'initial-scale=' + ratio );</script>