mobilemeteor

Web Application HTML messed up on mobile

Developed a web application using MeteorJS and deployed it on the MeteorJS cloud. It works great when using a computer however, everything looks very big when attempting to access it through mobile devices.

I don't have much experience with making web applications compatible on mobile devices but I'm just a little lost on what exactly I will need to do. Please advise.

Git: https://github.com/jalapagos/SimpleCalorieCounter

Solution

  • After seeing your app live, it looks like you haven't used any Bootstrap classes for your layout and some of the page elements.

    I recommend that you use the bootstrap grid system to make you app responsive. A very handy tool for checking how things look in different devices is the Google Chrome Dev tools device mode. Here is what your app looks like in an iPad Mini device emulator.

    enter image description here

    EDIT: Added step by step instructions to get started with bootstrap

    Here is what you need to do:

    1. Adapt the basic bootstrap template for you app. Be sure to include the three <meta> tags right after the opening of the <head> tag. See @jeremeyK's answer below.

    Note: the inclusion of bootstrap relates CSS and JS files, or even your custom caloriecounter.css file in this main template is NOT necessary, since Meteor would do that for you. You have the package twbs:bootstrap which will include the bootstrap related files for you.

    1. See how the bootstrap grid system works. Basically you might want to consider a simple layout like as follows:

    enter image description here

    The text in red are the bootstrap class that you need to add to get the layout. You can see that the top navigation bar has a class navbar, while the smaller section/sidebar has col-xs-12 and col-md-3 classes, and larger section has col-xs-12 and col-md-9 classes. The col-xs-* applies for very small screen devices while the col-md-* applies for medium screen sizes.

    What these classes mean here is, for the small section if the screen is very small (xs) then the area should cover the entire width of the window. If the screen is medium sized, then let it just occupy 1/4th of the window to make some space for the table section.

    1. Once you have your basic layout ready, go to each component of your app like the navbar, buttons, modal, etc. and fix the HTML markups as per the sample code given for each component.

    You can do these things very easily, you only need to follow the guides in the documentation. Also read explanation by @adamwolf below.