I have a page which looks like this:
<ion-row>
<ion-col width-100>
<ion-item>
<ion-input type="text" placeholder="Username"></ion-input>
</ion-item>
<ion-item>
<ion-input type="password" placeholder="Password"></ion-input>
</ion-item>
<button>Login</button>
<button>Register</button>
</ion-col>
</ion-row>
As I run it on two different devices, one being the iPhone4, the other being the iPhone6 plus. As you can see the font sizes differ and the the iphone6+ everything looks more bunched together. I want to stay as much as in the framework as I can so is there a way to have the font adjust depending on the screen size so it looks more uniform across devices? As well, is it possible to have the inputs and buttons spaced out appropriately depending on the screen size?
Since I think examples work best, in the iphone4 roughly 50% of the total height has content in it. In the iphone6 roughly 20% has content in it. I would like the iphone6 to have roughly 50% of it’s height filled with content such as the iphone4. The content should also scale meaning the fonts and the margin between elements should scale proportionally.
lol ) Just put your zoom on 100%, you use 67%
I don’t think you understand what I was asking. The amount of blank space is much larger in the iphone6 screen. I would like both to have roughly the same percentage of content filling the height of the screen and the same percentage of height having blank space.
Oh, I think you don’t understand something.
iphone 6 visually has same font size like iphone 4. And iphone6 display is longer than iphone 4 display. It’s clear? By your logic: bigger display = ugly big text and big components, do you really want it? Anyone don’t want this, bigger display -> more space -> more info that you can see.
If you want beautifully design, you must use vertical center or align to bottom of screen with background.
Of course I do understand the screen dimensions are different and have different lengths. My concern is for the contents to scale proportionally across the devices. For example with regular CSS you can use VH, VW, etc units on fonts which scale with the user device (https://css-tricks.com/viewport-sized-typography/) and provides a nice UX. I am not sure why Ionic has not adopted this as it would make fonts appear uniform across devices. I do not agree it is ugly, actually very much the opposite. With a large screen the font becomes quite small and content has a lot of “open space”. If you have a big tablet and your font is the same size as it would be on an iphone4, the fonts on the tablet would look tiny, now imagine if you could scale it, which you can using things such as viewport sizing. Of course I could write this all myself, but I would like to stick within the framework and was wondering if Ionic has methods to deal with this.
All word use another concept. In tablet I want see same font like in smartphone. Not bigger, I’m not blind. I recommend you read about px in smartphone.
Never mind.
Look.If you want use your concept you can. Just change all styles to percentage.
Well you might not be blind, but other users may have a difficult time with smaller text. Percentages will not work as percentages for fonts take it off the base size mostly always the parent (16px base size is what Google recommends). I am not trying to make it bigger from the parent font size, I am trying it to scale based on the actual device dimensions which is why View Port units were created. But again, I know I can do this, but I am looking to stay within the framework and looking if Ionic has anything for this issue.
Just want to point out, that it’s always best to test this on a device or simulator, and not expect chrome emulation to work.
iphone6s plus
iphone 4s
