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
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.
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.
Related
I've got a NextJS app where users can share links to Reddit and the link preview in Reddit should show a different thumbnail based on the shared link. It works perfectly sharing to Slack or FB, but it always shows the exact same image on Reddit regardless of the link shared.
As you can see below, it should be sharing a different image based on the trade.id. However, on Reddit it always only shows the image for trade.id == 2 (this was the first one I shared for testing). I've tried using different accounts, but still the same problem.
const TradePage: React.FC<Props> = ({ trade }) => {
return (
<div>
<Head>
<meta
property='og:url'
content={`https://${URL}/trades/${trade.id}`}
/>
<meta
property='og:image'
content={`https://${URL}/images/Thumbnail${trade.id}.png`}
/>
<meta property='og:image:width' content='1200' />
<meta property='og:image:height' content='901' />
<meta
property='og:title'
content={`Verified ${trade.ticker} Trade`}
/>
<meta
property='og:image:alt'
content={`Verified ${trade.ticker} Trade`}
/>
<meta property='og:image:type' content='image/png' />
</Head>
<TradeComponent trade={trade} />
</div>
);
Reddit caches the OG image on the first request, as do a few other services like Twitter.
Twitter offers an OG testing tool to bust the cache - Reddit does not offer such a tool.
Unfortunately, your OG image is cached on Reddit for as long as they want to cache it or until they release a tool. However, it's been like this for a few years, and it doesn't look high on their priority.
A workaround is to change the URL for the page. For example, adding a trailing slash, query param, or renaming the route.
UPDATE 12/2020: Seeing as this post still gets activity, I must stress that there are no answers here that apply to modern web development. In fact, almost all of the answers here would put your website in a precarious situation when it comes to accommodating those with disabilities. The only thing your responsive website should include in the head tag is:
<meta name="viewport" content="width=device-width, initial-scale=1">
Much more than just UX is at risk if you attempt to lock users into a specific scale (such as lawsuits or even government fines).
-- CONTINUE AT YOUR OWN RISK --
UPDATE 03/2019: This Q&A still gets some activity, nearly 5 years my question came up. Please note this problem was due in part to more common irregularities in older mobile devices at THAT time. With today's browsers and devices, fiddling with viewport scalability would be a shoe-horn fix to a bigger problem which is likely a problem in either your CSS or possibly your markup.
I've built a dozen responsive sites and have never experienced this problem. Basically, I'm using the meta tag for viewport with width=device-width, but iPhone and Android devices are still zooming. For some reason, I don't have this problem on Windows phones.
Here is an excerpt from the head html:
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Here is the HTML for the main wrappers (note the outermost div is added from jquery.mobile:
<body class="html front logged-in no-sidebars page-node mobile-detect-class ismobiledevice" >
<div data-role="page" data-url="/?mobile_switch=mobile" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 568px;">
<div class="container">
</div>
</div>
</body>
And here is the main wrapper CSS:
html,body { margin: 0; padding: 0; background-color: #d5d5d5; font-family: 'HelveticaNue', Arial; }
body {background: transparent none no-repeat 50% 0; min-height:100%; height:auto; background-size: auto 100%; width:auto;}
body > div {width: 100%; height: auto; }
.container { background: #fff none no-repeat 50% 0; margin-bottom: 20px; width:100%; position:relative;}
Bootstrap is also being loaded prior to the stylesheet.
I have tried a number of different things already including:
Removing jquery.mobile
Removing bootstrap
Updating bootstrap to the latest version
Changing the viewport tag to the following:
width=device-width, initial-scale=1.0
width=device-width, initial-scale=1.0, user-scalable=no
width=device-width, initial-scale=1.0, user-scalable=0
width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0
Adjusting various CSS properties related to width/max-width
I am completely out of ideas and seem to have exhausted anything new I can find / try via google. I would greatly appreciate any help you can provide!
After much testing and continued searching, I came up with a fix that seems to be very effective. Another solution I saw to a similar problem proposed the following:
<meta name="viewport" content="width=640, initial-scale=.5, user-scalable=no" />
This, at first, seemed like a decent solution as it worked on most phones. It bugged me a little bit though because it obviously isn't geared specifically towards working with any device width. That answer can be found here:
Android viewport setting "user-scalable=no" breaks width / zoom level of viewport
This solution worked on most mobile devices, but on some it was ineffective causing the display to be using incorrect zoom.
I believe the reason why the solution above is not effective is because not all mobile devices use a base 320 for zoom. So when device-width isn't working, this causes the constraints to be inconsistent.
I tried a bunch of different things, but then ultimately tried the following which (so far) seems highly effective:
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">
I believe the difference in this tag is that it tells the device to use it's native dimensions, but then adds a scale factor that tells it to not zoom in as much as it would normally.
I never was able to find any CSS adjustments that solved the problem, and I welcome any other answers in the future that may add further clarification to the problem/solution.
One other thing I'd like to add, is that an alternative meta tag that may be more effective for larger devices (tablets, which the site in this problem was not designed for), may be to set maximum scale instead of using user-scalable. Like this:
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5">
EDIT / Update 2018:
This question still gets quite a few hits even though it's a very dated problem. Certainly in hindsight and after much more experience with responsive, I can say that both the initial problem and the solutions were based around stop-gap issues that resulted from poorly constructed responsive CSS and HTML.
While the answers here may help future visitors solve for issues when it comes to retro-fitting more dated code, I would highly recommend that any new development conform to the latest in responsive standards. If your markup and CSS conforms, there are very few reasons why you would ever not want the standard meta for viewport in responsive (below):
<meta name="viewport" content="width=device-width, initial-scale=1">
I just removed initial-scale=1 and suddenly Android on Chrome and Silk on a Kindle both worked perfectly, site width matched to screen width in both orientations.
<meta name='viewport' content='width=device-width'>
I haven't tested on IOS, but I'll add an IOS specific hack if I need to.
I had an issue with bootstrap 4.3.1 looking like a scaled down version of a tablet view on mobile using this meta tag setup:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
so then i used the meta tag below to fix on mobile:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
now it looks like bootstrap 4 should look cross device
Great Stuff, however, I have discovered that if you are on a desktop and the viewport is set to a static width the backgrounds may not render on the portions of the screen not shown when you horizontal scroll.
To fix this for non-responsive pages simply add a min-width to the body.
body {
min-width: 960px;
}
Note, this is in addition to setting the viewport a static width
<meta name=viewport content="width=960">
Anyone looking for a fix in the future, stay with content="width=device-width, initial-scale=0.5" BUT adjust the initial-scale= until it works. I built a site that worked fine on different resolution monitors but was absolutely horrid on mobile. Try 0.5 then scale downwards .1 at a time until it works. On two Android phones 0.3 worked perfectly for me.
Just incase some other people are having the same issue I am, my problem as of 3/2020 seemed to be how I was setting up my inputs in my #Media query.
For me the meta tag didn't really do anything.
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1.0"
/>
My problem was more
#media only screen and (max-width: 500px) {
.input-example {
font-size: .9rem;
}
}
Once I changed it to :
#media only screen and (max-width: 500px) {
.input-example {
font-size: 1rem;
}
}
Everything seemed to work fine. From what I read it needs to either be 1rem or 16px.
Check this answer. In short :
<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi;" />
I'm creating a mobile version of a website, but only for smartphones. If the device is a tablet, notebook, netbook, desktop, or whatever similar device, I want the user to automatically go to the full site. If it was simple CSS, I would know how to do it. However, the mobile version uses different templates and scripts than the full-site version, and needs to be redirected accordingly rather than simply use another stylesheet.
Anybody have a suggestion or article that can show how to detect said devices and redirect accordingly?
A working solution to your problem can be found here: https://github.com/sebarmeli/JS-Redirection-Mobile-Site
The only way I could find to do this was a hack in which I:
Used css media queries to detect phones using max-device-width
Set a change in style on this basis - I changed body color from #000000 to #000001
Use an OnLoad to call a Javascript to check the body color.
Redirect on this basis. (In my own case I actually used a window.confirm call to offer the user a choice, rather than forcing redirection).
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Phone test</title>
<meta name="viewport" content="width=device-width">
<style type="text/css">
body
{ color: rgb(0, 0, 0);}
#media screen and (max-device-width:600px), screen and (max-width:600px)
{
body{ color: rgb(0, 0, 1);}
}
</style>
<script type="text/javascript">
<!--
function doPhoneCheck()
{
var col;
if(document.body.currentStyle)
{
col = document.body.currentStyle.color; // IE
}
else
{
col = getComputedStyle(document.body).getPropertyValue("color");
}
if(col =="rgb(0, 0, 1)")
{
window.location.href="http://www.apple.com/";
}
}
//-->
</script>
It detects all iPhones to 6+, and the Android and Windows phones I've tested. It discriminates against all current iPads and against the laptops and desktops I've tried.
NB
(1) For color you must use rgb and leave spaces exactly as written.
(2) I found similar code would not detect body background-color for some unknown reason.
(3) The key to detecting the css style is to use getComputedStyle() (or currentStyle for IE) rather than getStyle().
(4) Even though the change in body color is imperceptible, it can be over-ridden by specifying colors for all your css classes etc.
Google Plus lists all your +1s with a small preview of the webpage that was +1ed. Techcrunch and Mashable's previews come up as the first sentence of the article, however for me it just takes the first HTML on the page (which in my case is navigation). How can I get it to target the article for this preview rather than the navigation?
I have looked through the API and couldnt find anything that would do what I'm talking about.
Well, you have three options to avoid G+ trying a best guess.
1) (prefered) Mark up your site with microdata. Please refer to http://schema.org and possibly the Google Webmaster Tools help section on microdata and the Opera Developer resources.
It will look something like:
<body itemscope itemtype="http://schema.org/Article">
<h1 itemprop="name">Article Title</h1> <!-- snippet title -->
<img itemprop="image" src="image-url"></img> <!-- the snippet icon -->
<p itemprop="description">Snippet text.</p>
</body>
The idea is to mark up the parts that you already uses as base for your snippet. Yahoo, MS Bing, Google and a few other search engines will try to honour this for their search snippets as well, as well as future browser versions, e.g. for bookmarks.
2) Use the facebook Open Graph protocol (which is not valid html, but makes your snippets compatible with facebook "shares").
It will look like (put this in your section)
<meta property="og:title" content="Your snippet title"/>
<meta property="og:image" content="url://of-your-snippet-image.jpeg"/>
<meta property="og:description" content="Your snippet text goes here"/>
3) Set the title and description meta tags.
<meta name="title" content="Your snippet title" />
<meta name="description" content="Your snippet text goes here">
Google finally released how to do it. http://developers.google.com/+/plugins/+1button/#plus-snippet
You need to use itemprop tags to tell +1 what you want to use.
There's many ways to go about it:
You can add the following tags to your opening HTML declaration:
<html itemscope itemtype="http://schema.org/Article">
and then add the following meta descriptors:
<meta itemprop="name" content="Your article's title" />
<meta itemprop="description" content="Your article's description or excerpt" />
and finally add this to the image you want to use:
<img itemprop="image" src="image.jpg" />
I've been fiddling with a partial trust XBAP - how can I change the icon shown in the IE-tab and the title (aside from changing the assembly-name in the project properties)?
I would also like to change what is shown in the Internet header (right now it shows the address of the XBAP.
I had a similar issue where I could not change the title in IE 10 (this was the first stack overflow answer that comes up when you Google "xbap title"). I found the solution here:
In code, set Application.Current.MainWindow.Title to the title you want to show. This worked for me, hopefully this will be helpful for the next guy.
Load your XBAP from a HTML page using an IFRAME. In the HTML page add a title and icon.
Something like this:
<html>
<head>
<title>This is my title</title>
<link rel="shortcut icon" href="http://wherever.com/icon.ico">
</head>
<body>
<iframe location="something.xbap"
style="width:100%; height:100%; border:0; overflow:auto" scrolling="no"></iframe>
</body>
</html>
This is simplified from code that I actually use, except due to some other requirements I'm giving the iframe an id and setting its location using JavaScript in the body's onload event. I assume the above will work just as well.