Apparently i've screwed something up! After adding to home screen, I try to open the "app" and instead of using the iPhone rendering system with standalone mode etc, safari is opening it! It was working fine before, does anyone know what this could be?
Using JQM
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
Related
I've tried for hours to get the icon from the Chrome function "add to homescreen" (Zum Startbildschirm hinzufügen) but it appears only the icon for the normal favorits.
I use an IIS as webserver, and write the html exakt as in the Chrome Doku.
<title>MangoApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="196x196" href="http://tatwebapp196x196.png">
I've tried with different paths like relative and absolut but always the same effect: no icon.
Tested on Nexus and Xcover2 with the newest Chrome browser Versions 36.0.1985.128 and 35.0 1916.141
What is wrong here, can anybody help ?
Thank you
Michaela
Since I can't comment yet (I should use this more!)...
I've tested, with an application I'm currently developing, on:
Nexus 10 (Chrome 36.) ~ favicon used
SG SV (Chrome 36.) ~ favicon used
SG SV (Chrome Beta 37.) ~ favicon used
and finally...
SG SIII (Chrome 35.0.1916.141 (for some reason)) ~ 196x196 icon used! (this is the same as a version you tested this on, though, so for reference, it's running 4.3 still)
I guess this should provide some more validity to Michael's point, so I guess I'll file a bug report and hope for an update soon. Regardless, I'm strangely glad to see there's actually a problem.
A link to my app, which is actually a game (the most stable thing should be the icons...) here.
It would be interesting to know if this is working in Chrome 37 now.
We are using the same meta tags with a slightly different format for the icon, adding the "type" attribute, that may matter. This works in Android 4.0+ with Chrome 37, as well as iOS.
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="icon" type="image/png" sizes="196x196" href="images/AppIcon.png">
<link rel="apple-touch-icon" href="images/AppIcon.png">
<link rel="apple-touch-startup-image" href="http://ourURL/images/iPhoneStartup.png">
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, height=device-height, width=device-width" />
<meta name="viewport" content="user-scalable=no,
initial-scale=0.5, width=610, height=1024" />
The mobile is small,so I wan't to scale html5 to 0.5.It takes no effect via phonegap,but it's OK via chrome on iphone 5.
Is it phonegap's bug?
--------------Edit----------------
I found that if I move off the code I showed above,the chrome will still do well on scaling.The pictures are showed smaller than desktop views.It's scaled by default.
But phonegap doesn't.
How to make phonegap scale my html5?
Try this
<meta name="viewport" content="user-scalable=no, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, width=device-width, height=device-height, target-densitydpi=device-dpi" />
There is a strange activity with our sites, http://beta.bridalbook.ph when view in mobile.
When view in iOS the site don't pinch, but when view in android it pinch.
Can anyone help me with this issue?
Try adding user-scalable=yes to your viewport meta tag
<meta name="viewport" id="view" content="width=device-width minimum-scale=1, maximum-scale=1" />
to give you
<meta name="viewport" id="view" content="width=device-width minimum-scale=1, maximum-scale=1", , user-scalable=no />
And I would move your Meta tage up near the top with the rest.
I am having some issues with my viewport on the mobile version of my web site. All of my elements display and are re-sized correctly within the page, however the page extends much farther then the end of the content.
Is there a way to restrict the height of my view port? Or could this possibly be a different issue I am just not seeing?
After further testing this error only occurs on Android mobile devices. Are there any know issues with Android viewports?
Remove height=device-height, from
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
this is i found in your code
if you height=device-height, will fit the site vertical on the screen
may be you required the
<meta name="viewport" content="width=device-width">
only
I am developing a mobile web-application.I am using jsp,ajax,java classes.I want to stop the page zooming on browser.How it will possible?...I was used meta tag for it but it did n
This should work fine for iOS:
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
On android, it doesn't work for certain devices though such as HTC.