Scaling apps to tablets


#1

When an app has been made just for a phone, often an tablet like an iPad will auto zoom x2, rather than show the same content with more space around it. Is there a quick way of forcing the app to scale or to have this behaviour?

Thanks in advance. Gary


#2

Ionic’s css will take up the full width of the screen so it won’t show as zoomed in, it will look the same as the phone but stretched wider. If you run ionic serve on the app and stretch the browser wider, that is how it will look on the tablet.

The way I have changed my app to look nicer on a tablet is by using media queries. You can change the font-size for example to be larger on wider devices:

/* Larger than a phone */
@media (min-width: 567px) {
    font-size: 16px;
}

Ionic also has responsive grids that can be used to break content based on the screen size (this is essentially media queries).


#3

Thanks for the reply. That’s what I thought. The app is primarily for a phone, but if being installed on a tablet I wanted everything to stay the same even the app to imply that it is for a phone, like the native iOS ones do if they are phone only. Nevermind, I’ll use media queries to change a few bits. Thanks


#4

I actually noticed, that when archiving the app in xcode you can set target to just iphone… this scales as I wanted. Not sure this option is available for Android


#5

Could you go into more detail on how you got it to stretch on iPad?

my target devices are iPad and Nexus 5 phone. It looks nice on the phone but there is too much blank space on the iPad so I want it to stretch like native iPhone apps do on iPad.