Mobile responsive doesn't work after deploying to meteor.com

help
1

Hi
I have developed an app and the responsive nature of the app works perfectly when I use it on the desktop browser/. But the responsive behavior goes for a toss once I use the app on my mobile browser.

http://testapp6.meteor.com/tracking is the app.Please help ASAP.

Thanks

2

Please note if I test the website on the responsive web design tester app on chrome, the responsive behavior work fine.

3

It is working fine on my mobile browser (chrome on latest android) and seems to be fine on MobileTest.

4

Pretty much the only reason that could happen is if the minification process is messing with your CSS somehow. That shouldn’t happen, but if it’s that I would suggest making your CSS more specific to make sure it doesn’t get overridden.

5

There is no viewport definition in the HTML, so the mobile device’s browser doesn’t know how to handle scaling properly. Not sure how it can be working in your local deployment then.

<meta name="viewport" content="width=device-width, initial-scale=1">

(see https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)

1 Like
6

Thanks. Where do I have to add this code?

7

This typically should be set in a head.html file. I use jade, so this is my head.jade file showing the meta data info:

head
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(name="viewport", content="width=device-width, initial-scale=1")
    meta(name="description", content="")
    meta(name="author", content="")