Inconsistent font size in iPad and iPhone

AnkiMobile (iPhone/iPad) Help
1

Hi. Anki is rendering a readable font size in my Macbook pro. And Ankimobile is rendering a readable font size in my iPhone 7, but not in my iPad Pro 10,5", in which fonts are too big to read the cards.

Please advise me what to change in my template’s css:

.card {
 font-family: Helvetica, arial;
 font-size: 20px;
 text-align: left;
 color: black;
 background-color: white;
}

.cloze {
 font-weight: bold;
 color: blue;
}
.nightMode .cloze {
 color: lightblue;
}

@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
  html {
    font-size: 15px;
  }
}

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2) {
  html {
    font-size: 14px;
  }
}
2

Following the instructions in Anki’s manual for iPhone and iPad, doesn’t solve the rendering problem that makes Ankimobile unusable in my iPad:

.iphone {
 font-size: 15px;
}
.ipad {
 font-size: 14px;
}
3

Have you tried adjusting the font by more than 1px? You’ll also need to check your template to make sure there is not another styling line that is overriding the font you specified.

1 Like
4

Even if I further adjust font size for iPad and iPhone -following Anki’s Manual for Platform-Specific CSS-, it has no effect on the display in either device:

.card {
  text-align: left;
  background-color: white;
	font-family: Helvetica, Arial;
}

.cloze {
 font-weight: bold;
 color: orange;
}

.nightMode .cloze {
 color: lightblue;
}

.mac .jp {
	font-size: 20px;
}

.iphone .jp {
  font-size: 22px;
}

.ipad .jp {
    font-size: 8px;
}

As far as I can tell, AnkiMobile’s styling for .ipad and .iphone don’t work. Contrary to what Anki’s Manual says.

5

The specifier needs to be combined with another to make it more specific - otherwise the default .card styling wins. If you are not wrapping your content in a class like jp, the following should work instead.

.ipad .card { font-size: 40px; }

6

That made it! Thanks for your help.