Any ideas why my Meteor app suddenly lost mobile responsiveness?

help
1

This in my development machine. Currently developing with React + Meteor 1.4.

I use Google Chrome dev tools to see responsiveness on different smart phones and tablets when suddenly today I find responsiveness gone. I made no major changes to any CSS files, reset my project, restarted my app and still no responsiveness.

I had a similar problem like this in my previous Meteor apps using Blaze. I solved it by adding the viewpoint meta tag, but this can’t be done with my React + Meteor configuration.

No clue why or how this happened.

2

Maybe you have an element that has a fixed size and stretches your page. Try hiding elements in the body until you have no scrollbar anymore.

Does it happen also if you shrink your viewport manually (e.g. make the browser smaller) ?.

On real devices, you have to set the viewport. With react apps add this meteor package: static-htm

after that, you can define <meta>-tags in the <head>

create a file head.html or so somewhere and place:

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

When I shrink the browser manually, it is responsive completely and have no problems. When I use Google Dev tools to see different views from tablets and phones, it’s not responsive.

I apologize for not adding this part before.

4

ok then you should add the viewport definition like above

5

I made no major changes to any CSS files

One thing I like about computers is that they are consistent. If nothing changes, nothing will change. Therefore I suggest you check also the minor changes in the CSS and HTML before investigating the ambient domains.

6

Thanks. Adding that package and defining the viewport tag fixed the issue.

My question is why would the responsiveness suddenly disappear without any reason? Or is it an issue with Google Chrome dev tools? Any ideas?