iOS Question The Htlm display differs between Android and iOS.

Filippo

Expert
Licensed User
Longtime User
Hi,

I use a webview to display the same HTML file in an Android app and an iOS app.
However, the font size is not displayed the same.
On Android, the size of the normal and bold font looks the same, but not on iOS, why?
Is there a solution to this problem?

Android:
1722430405568.png


iOS:
1722430417671.png
 

Filippo

Expert
Licensed User
Longtime User
Do you use a WebView or a borwser?
Maybe iOS browser shows html differently?
As I have already written, I use a WebView.

Are you setting the fonts or are you using the default font of the browser?
It may be better to set the fonts yourself.

I don't know how to set different fonts in a WebView.
Besides, the fonts are already defined in the html-file.
 
Upvote 0

hatzisn

Expert
Licensed User
Longtime User
Make sure you will add this in the <head> section of the html page:

B4X:
<meta name="viewport" content="initial-scale=1.0" />
 
Upvote 0

hatzisn

Expert
Licensed User
Longtime User
If I were you I would ask ChatGPT to write me some CSS code to define precisely the looks of the text.
 
Upvote 0

Filippo

Expert
Licensed User
Longtime User
The problem with the font is only on the iPhone, everything is fine on the iPad.
Attached is the html file.

1722511049393.png
 

Attachments

  • datenschutz_en.txt
    1.9 KB · Views: 66
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
The problem with the font is only on the iPhone, everything is fine on the iPad.
Attached is the html file.

View attachment 155831
test:

Change:
HTML:
<!DOCTYPE html>
<html style="font-size: 16px">
<head>
 
  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>History_en</title>
 
</head>
use Style

Tag Meta
 
Last edited:
Upvote 0

Filippo

Expert
Licensed User
Longtime User
I had the same problem with a web app and found these articles which helped me fix the webview on Android and iOS.
I have been trying all possible variations for a few hours, unfortunately without success.
The bold font is always displayed smaller than the normal font.
And as already written, the problem is only with the iPhone.
 
Upvote 0

Alex_197

Well-Known Member
Licensed User
Longtime User
Please see the attached Android and iPhone projects with youir html

Android Samsung S23+
iPhone 14
 

Attachments

  • ViewFont iPhone.zip
    3.1 KB · Views: 56
  • ViewFont Android.zip
    3.1 KB · Views: 51
Upvote 0

Andrew (Digitwell)

Well-Known Member
Licensed User
Longtime User
You can set you default font with the following:

  1. Go to Google and choose your font.
  2. Include the reference in the header.
  3. Set the style of the body font to the font chosen.
For example.
IF you chose the Poppins font, your file would look like this:
B4X:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
 
  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
  <title>History_en</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<style>
body {
  font-family:  "Poppins",sans-serif;
}
</style> 
</head><body style="margin: 10px; padding: 10px;">
<div style="text-align: center; font-weight: bold;"><big>privacy
policy
</big></div>

<p style="height: 5px;"><span style="font-weight: bold;">-
Note:</span></p>

<ul>

  <li>Please agree to this privacy policy,<br>
if you do not agree the APP can not be executed. </li>
</ul>

<span style="font-weight: bold;"></span>
<p style="height: 5px;"><span style="font-weight: bold;">-&nbsp;</span><span style="font-weight: bold;">Advertising</span><span style="font-weight: bold;">:</span></p>

<ul>

  <li>Advertisements are displayed only in the free version.</li>
  <li>Google Admob is used for advertising, content and quality
are the sole responsibility of Google.</li>
</ul>

<span style="font-weight: bold;"></span>
<span style="font-weight: bold;"></span>
<p style="height: 5px;"><span style="font-weight: bold;">-&nbsp;</span><span style="font-weight: bold;">Bluetooth</span><span style="font-weight: bold;">:</span></p>

<ul>

  <li>sed only to:
    <ol>
      <li><span class="tlid-translation translation" lang="en"><span title="" class="">connect the app to the home Bluetooth devices.<br>
You can find the Bluetooth devices at: http://filippo-software.de</span></span></li>
    </ol>
  </li>
</ul>

<p style="height: 5px;"><span style="font-weight: bold;">-&nbsp;</span><span style="font-weight: bold;" id="result_box" class="short_text" lang="en"><span class="">Data
protection</span></span><span style="font-weight: bold;">:</span></p>

<ul>

  <li><a href="test.html"><span id="result_box" class="short_text" lang="en"><span class="alt-edited">Privacy
Policy</span></span></a></li>
</ul>

</body></html>
 
Upvote 0

Filippo

Expert
Licensed User
Longtime User
Please see the attached Android and iPhone projects with youir html

Android Samsung S23+
iPhone 14
Many thanks for the help.
Unfortunately, your solution doesn't look any better.
1722535600601.png
 

Attachments

  • 1722535653856.png
    1722535653856.png
    68.3 KB · Views: 43
Upvote 0

Filippo

Expert
Licensed User
Longtime User
You can set you default font with the following:

  1. Go to Google and choose your font.
  2. Include the reference in the header.
  3. Set the style of the body font to the font chosen.
For example.
IF you chose the Poppins font, your file would look like this:
B4X:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
 
  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
  <title>History_en</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<style>
body {
  font-family:  "Poppins",sans-serif;
}
</style>
</head><body style="margin: 10px; padding: 10px;">
<div style="text-align: center; font-weight: bold;"><big>privacy
policy
</big></div>

<p style="height: 5px;"><span style="font-weight: bold;">-
Note:</span></p>

<ul>

  <li>Please agree to this privacy policy,<br>
if you do not agree the APP can not be executed. </li>
</ul>

<span style="font-weight: bold;"></span>
<p style="height: 5px;"><span style="font-weight: bold;">-&nbsp;</span><span style="font-weight: bold;">Advertising</span><span style="font-weight: bold;">:</span></p>

<ul>

  <li>Advertisements are displayed only in the free version.</li>
  <li>Google Admob is used for advertising, content and quality
are the sole responsibility of Google.</li>
</ul>

<span style="font-weight: bold;"></span>
<span style="font-weight: bold;"></span>
<p style="height: 5px;"><span style="font-weight: bold;">-&nbsp;</span><span style="font-weight: bold;">Bluetooth</span><span style="font-weight: bold;">:</span></p>

<ul>

  <li>sed only to:
    <ol>
      <li><span class="tlid-translation translation" lang="en"><span title="" class="">connect the app to the home Bluetooth devices.<br>
You can find the Bluetooth devices at: http://filippo-software.de</span></span></li>
    </ol>
  </li>
</ul>

<p style="height: 5px;"><span style="font-weight: bold;">-&nbsp;</span><span style="font-weight: bold;" id="result_box" class="short_text" lang="en"><span class="">Data
protection</span></span><span style="font-weight: bold;">:</span></p>

<ul>

  <li><a href="test.html"><span id="result_box" class="short_text" lang="en"><span class="alt-edited">Privacy
Policy</span></span></a></li>
</ul>

</body></html>
Unfortunately, I can't use your solution because my app has to work without the internet.
 
Upvote 0
Top