iOS Question The Htlm display differs between Android and iOS.

Filippo

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
 
Sort by date Sort by votes
Filippo

Filippo

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

Andrew (Digitwell) said:
Are you setting the fonts or are you using the default font of the browser?
It may be better to set the fonts yourself.
Click to expand...

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

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

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

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: 30
Upvote 0
TILogistic

TILogistic

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.
weblog.west-wind.com

Preventing iOS Textbox Auto Zooming and ViewPort Sizing

If you've build mobile Web applications that need to run on iOS Safari and on an iPhone you might have run into the problem of input fields 'auto-zooming' the display when the input field and popup keyboard get focus. The view zooms and doesn't return back to the unzoomed even after exiting the...
weblog.west-wind.com weblog.west-wind.com
stackoverflow.com

responsive viewport font not consistent on mobile / ios devices

After doing some research, I opted for using vw units to scale my responsive typography. %meta{:content => "width=device-width, initial-scale=1, user-scalable=0", :name => "vie...
stackoverflow.com stackoverflow.com
 
Upvote 0
TILogistic

TILogistic

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

View attachment 155831
Click to expand...
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
www.w3schools.com

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com

Tag Meta
www.w3schools.com

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
www.w3schools.com

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
 
Last edited:
Upvote 0
Filippo

Filippo

Expert
Licensed User
Longtime User
TILogistic said:
I had the same problem with a web app and found these articles which helped me fix the webview on Android and iOS.
weblog.west-wind.com

Preventing iOS Textbox Auto Zooming and ViewPort Sizing

If you've build mobile Web applications that need to run on iOS Safari and on an iPhone you might have run into the problem of input fields 'auto-zooming' the display when the input field and popup keyboard get focus. The view zooms and doesn't return back to the unzoomed even after exiting the...
weblog.west-wind.com weblog.west-wind.com
stackoverflow.com

responsive viewport font not consistent on mobile / ios devices

After doing some research, I opted for using vw units to scale my responsive typography. %meta{:content => "width=device-width, initial-scale=1, user-scalable=0", :name => "vie...
stackoverflow.com stackoverflow.com
Click to expand...
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
A

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 Android.zip
    3.1 KB · Views: 26
  • ViewFont iPhone.zip
    3.1 KB · Views: 21
Upvote 0
Andrew (Digitwell)

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

Filippo

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

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

Attachments

  • 1722535653856.png
    1722535653856.png
    68.3 KB · Views: 15
Upvote 0
Filippo

Filippo

Expert
Licensed User
Longtime User
Andrew (Digitwell) said:
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>
Click to expand...
Unfortunately, I can't use your solution because my app has to work without the internet.
 
Upvote 0
You must log in or register to reply here.

Similar Threads

Erel
  • Locked
  • Article
Android Tutorial [B4X] Firebase Push Notifications 2023+
2
Replies
36
Views
16K
aeric
aeric
M
  • Solved
iOS Question [B4X] BLE 2 - Concept of "ID" different between iOS and Android...
Replies
2
Views
2K
Mike1970
M
Andris
  • Solved
iOS Question [SOLVED - NO DIFFERENCE!] "Wait For" operational differences between B4i and B4A?
Replies
11
Views
1K
LucaMs
LucaMs
tsteward
  • Solved
iOS Question Solved - Webview between platforms display different
Replies
5
Views
2K
jahswant
jahswant
Erel
  • Locked
  • Article
Android Tutorial [B4X] B4XPages - Cross platform and simple framework for managing multiple pages
Replies
12
Views
70K
Erel
Erel
Top