0

I'm using Nativescript Angular for my mobile app.

The text of the same font-size (<Label text="test" fontSize="20">) appears different looking/size on my Android phone and IOS phone. Aren't them supposed to be of the same physical size if the unit of font-size is dips? Isn't that the purpose of dips?

I'm not sure what goes wrong, should I manually set the dips conversion somewhere? or should I add unit suffix like fontSize="20dp"?

I know this can't illustrate much, but I'll just put the screenshots from android phone and ios phone for some reference. (the left one is Android, the right IOS. IOS always seems smaller)

Viv
  • 913
  • 1
  • 7
  • 18
  • There might be something useful here: https://stackoverflow.com/questions/16390762/whats-dp-density-independent-pixels-units-with-css – Moob Oct 09 '19 at 18:27
  • 1
    By default {N} uses SP as unit for Android to support auto scaling, and for iOS it's always points. You may use platform specific CSS to apply different font measures for each platform. – Manoj Oct 09 '19 at 18:39
  • @Manoj I found this *font-size: Sets the font size of the matched view (only supports device-independent units* in the {N} documents. Does it mean sp isn't supported? – Viv Oct 09 '19 at 20:52
  • SP is same as DP but it allows Android to auto scale based on user preferences, that's the only difference there. – Manoj Oct 09 '19 at 20:54
  • @Manoj so if user doesn't set any preference, with the same dp size, the physical size of the text should be same on android & ios phone? – Viv Oct 09 '19 at 20:58

1 Answers1

0

They have differentes device-pixel-ratio. You need declare one for both or one for each to control perfectly the sizes. You can define one scale for everyone, using a meta tag:

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

Or it's using a media query for retina device:

@media only screen and (min-resolution: 200dpi){
    /* here your code for resolution > 200dpi */
}
Luis jorquera
  • 59
  • 3