How to center content on the screen depending on your mobile device with intel xdk?

Question

Good night,

I’m developing a mobile application with intel XDK with bootstrap framework, I need to know how I can put my content centered on the screen on each type of smartphone and resolution that I’m not able to do on iphone 4s looks good but for example on iphone 6 plus gets a big space on white bottom.

<style>
        /* following three (cascaded) are equivalent to above three meta viewport statements */
        /* see http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html */
        /* see http://dev.w3.org/csswg/css-device-adapt/ */
            @-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; }          @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
            @-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; }                   @viewport { user-zoom: fixed ; min-zoom: 100% ; }
            /*@-ms-viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }   @viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }*/
</style>

Answer 1

You should take a look at how to work with media queries, as already explained in this question/answer here from Sopt.

To find the specific resolution of the device you want to work on, you can use the cssmediaqueries.com