CODEWITHSUNDEEP
codenameone
priya
priya

Reputation: 468

Displaying of html text in codenameone is very small

I am using browser component to display HTML text in my app. Everything was working fine before, but in recent build the font size displayed in browser component is very small.It works fine on simulator but on device it looks very small. Here is my test case and is tested on iPhone XS , iPhone 7 and iPad.

    Form f= new Form();
    f.setLayout(new BorderLayout());

    BrowserComponent browser = new BrowserComponent();
    Container cont = new Container();
    cont.setLayout(new BorderLayout());
    cont.addComponent(BorderLayout.CENTER, browser);
    String data = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"http://www.w3.org/1999/xhtml\"><head><title>Test</title><meta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\" /></head><body><p>Hello World</p></body></html>";
    browser.setPage(data, "");
    cont.setPreferredH(com.codename1.ui.Display.getInstance().getDisplayHeight()/2);
    browser.setPreferredH(com.codename1.ui.Display.getInstance().getDisplayHeight()/2);
    f.addComponent(BorderLayout.CENTER,browser);
    f.show();

Let me know what is been changed and how I can increase the size of font . Thanks

Upvotes: 3

Views: 96

Answers (2)

Francesco Galgani
Francesco Galgani

Reputation: 6249

I add an info to the Shai's answer about the font size. Try to add the following meta tags:

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="MobileOptimized" content="width" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="cleartype" content="on" />

Hopefully these meta tags fixes the font sizes on real devices. In the CSSes used in web pages, I suggest to use the em as unit to specify the font sizes, because its mobile-device-friendly nature (independent from the dpi of the screen device).

Addendum: to don't confuse, while em is fine for CSSes used in web pages (inside a BrowserComponent), in the Codename One CSSes used to style Components it's better to use mm or pt as unit independent from dpi.

Upvotes: 2

Shai Almog
Shai Almog

Reputation: 52760

Apple started sending out warning emails to everyone who uses UIWebView so we toggled the switch to use WKWebView. This is something we wrote about a while back here: https://www.codenameone.com/blog/wkwebview.html

You generally shouldn't switch back but you should add a stylesheet to your HTML to explicitly determine the font size. That's the right way to do it on all occasions.

Upvotes: 1

Related Questions