Chrome: the icon meta is not used for "adding to desktop" on windows laptop.
<!doctype html>
<html>
<head>
<title>Example Application</title>
<meta name="viewport" content="width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="500x400" href="/icon.png">
</head>
<body>
Hello, Great day!
</body>
</html>
But it is used for "add to home screen" on android device. Any thoughts?
I had commented on this earlier. But, I was able to get an icon in the "Add to Desktop" tool within Chrome.
For a long time it wouldn't work for me, but my resolution was 150x136 (not sure why, but that was the original I was given). I then tried using a program, Gimp for example, to change the resolution to be square (136x136 to be exact). Then it worked!
So, my suggestion is to make your icon perfectly square and then refresh your page (crtl+shift+R) and try again.
Related
I have seen this question, but my goal is to simply view an HTML page correctly in a web browser on Android. Simply put, the .html file contains the following code:
<!DOCTYPE html>
<html>
<head>
<style>a {font-size:25px;}</style>
</head>
<body>
Some text<br>
</body>
</html>
I'm trying to view this file on my phone with the large font size that is set in style. But every browser I have tried changes the font size to normal when loading. I know about the "accessibility" setting, but that doesn't meet my needs as it changes the font size for every page, and is also not big enough.
I have also tried other ways to change font size, such as using font-size property inside <a> tag, <big> tag around the text, and the font size changes accordingly on desktop but android doesn't follow suit. Any help would be appreciated!
Add <meta name="viewport" content="width=device-width, initial-scale=1"> in your head tag.Read docs here
<!DOCTYPE html>
<html>
<head>
<style>a {font-size:25px;}</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
Some text<br>
</body>
</html>
Try add in the head tag the following meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I'm having a difficult time with a mobile site I'm creating.
Everything is working as expected on all of the devices I've tested, and all of the different mobile browsers I've tested, aside from one: Chrome (v38.x) on Android (Nexus 7)
Essentially, what is happening is that everything is seems to be blown up/zoomed in, and it's making the site layout look ridiculous.
I'm using the meta viewport tag and em-based media queries to show different layouts depending on the device.
Here is a very simple example of what's happening:
<head>
<title></title>
<meta name="viewport" content="width=device-width;initial-scale=1.0;" />
</head>
<body>
<div id="top">Font size: 1em</div>
</body>
JSFiddle: http://jsfiddle.net/t6fdb3ak/3/
And below is a screenshot of how this displays on the Android Chrome browser.
This seems absolutely wacky, why is this happening?
Also, if I alert the innerWidth of the window on this page, I'm getting 121px instead of 980px.
<script>
alert(window.innerWidth);
</script>
I solved the problem after reading some of this page https://developer.chrome.com/multidevice/webview/pixelperfect
I removed the semi-colons from the viewport meta tag, and replaced them with commas, like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
This is how it looked before:
<meta name="viewport" content="width=device-width;initial-scale=1.0;" />
Hopefully everything will still work in the other browsers. I'll report back if not!
Try to import bootstrap, They have a build in viewport, if you use that it will work for sure.
I have a simple html website I am trying to view as a local version on a tablet with ICS. The html works, but the css and js files do not seem to work. All I am seeing is the html. Is there something I need to do in order to view the website in its full form?
I am not using any special code specifically for mobile. There is only a folder, an index.html file, and folders for js and css.
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kiosk Site</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
</head>
Some of your code would be appreciated.
I persume you're using a WebView:
Regarding the JS - you need to call setJavascriptEnabled().
Reagrding the CSS - it's hard to tell with none of your code. But I would suggest you look at this: Rendering HTML in a WebView with custom CSS.
I'm trying to present a simple message to the user in my mobile website.
I want the message size approximately will be the same on mobile devices with similar screen size, for example iPhone and Samsung Galaxy (android).
I read a lot of posts on this issue, and many recommended to use -webkit-text-size-adjust: 100% to make it happen. But I didn't understand how to use it...
The webpage:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html { -webkit-text-size-adjust:100%; }
</style>
</head>
<body>
<div style="text-align:center;font-size:6em;-webkit-text-size-adjust:100%;">
Hello World!
</div>
</body>
</html>
The result:
Did you test the viewports meta?
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, height=device-height"/>
I have written a small web app to collect some data and store it in a central database. I'm walking around, reading values and typing them into a web site on my Android smartphone. It's just for me, so no public usability concerns apply this time.
Now I want to add a button to increment a reading by one, and I need to be able to push that button several times. But if I do it too fast, the browser recognises a double-tab and scales/zooms into the page.
I have added a viewport header already and played with every value combination I could find on the web. But the page remains scalable. How can I stop that?
Here's a minimal test page that fails for me:
<!doctype html>
<html>
<head>
<title>Test page</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<style type="text/css">
body
{
font: 16pt sans-serif;
}
</style>
</head>
<body>
This is a test page. It should not be scalable by the user at all. Not with the two-pinger pinch gesture and even less with a double-tap on the text.
</body>
</html>
Adding initial-scale=1, maximum-scale=1 and all sorts of target-whateveritwas-dpi doesn't change a thing. I have restarted the browser (Dolphin HD and the stock browser) and cleared the cache already. I'm on Android 2.2, the phone is an HTC Desire.
This worked for me in all android browsers:
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
A common mistake is that people use 2 meta viewport tags like this:
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
The second meta viewport tag overrides the first one in some browsers (for example - chrome for android).
There is no reason to have two meta viewport tags, as the second one is contained within the first one.
See This answer for more details
It's a known bug in Android browsers : http://code.google.com/p/android/issues/detail?id=11912
I have tried all of them but not work for me. And I found this one really work.
<!-- set viewport to native resolution (android) - disable zoom !-->
<meta
name="viewport"
content="target-densitydpi=device-dpi; width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"
/>
from http://andidittrich.de/index.php/2012/02/disable-zoom-function-of-android-browser-force-native-resolution/
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width">
Meta Viewport tag does solve the problem in most of the cases. But Android has a strange issue where on orientation change the meta tag is reset and you can scale or zoom the page again.
For fixing this issue in Android monitor orientaionchange and set meta viewport tag on every orientationchange event.
Here is the link with code snippet http://moduscreate.com/orientation-change-zoom-scale-android-bug/
"user-scalable=no" has never worked for me, instead I use "user-scalable=0" which seems to work a treat.
Use below lines of Code :
Check the application Samsung Galaxy S there it is supporting. But when I am opening the same link inside the Galaxy Ace there Turn Off the Zooming is not supporting.
Please Check your application some Other mobile and check. Please go through below link you will get the Idea:
http://garrows.com/?p=337
Try all of this at the same time (extracted from here):
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />
Then tell us your experience