<!doctype html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=600,user-scalable=no">
</head>
<body>
<div style="width:570px;height:300px;border:1px solid black" >
<input type=text>
</div>
</body>
</html>
When opening file above from Home Screen and tapping into input box in landscape mode, then rotating phone to portrait mode, screen zooms in and there's no way to zoom out. Doesn't happen when opening in Safari.
Steps to Reproduce:
1. Save the bookmark to file to Home Screen
2. Open bookmark from Home Screen
3. Turn phone to Landscape mode
4. Tap into input field, keyboard appears
5. Turn phone to Portrait mode
Expected Results:
Screen shouldn't zoom in.
Actual Results:
Screen zooms in.
Version:
IOS 9
Notes:
Didn't happen prior to IOS9. Doesn't happen in Safari, only in Web Clip.
Any ideas for workaround?
Found a solution over here:
https://github.com/scottjehl/iOS-Orientationchange-Fix
Although for me there's no need for accelerometer, simply setting meta content to "maximum-scale=1" does the trick:
var meta = document.querySelector( "meta[name=viewport]" ),
initialContent = meta && meta.getAttribute( "content" ),
disabledZoom = initialContent + ",maximum-scale=1";
function restoreZoom(){
meta.setAttribute( "content", disabledZoom );
}
window.addEventListener( "orientationchange", restoreZoom, false );
Related
I'm creating a web app that needs to be displayed in full screen mode on an ipad. I also need to remove the 300ms click delay for the app to perform responsively. To do this I've added the following metatags to the header:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0">
Full screen mode is activated when I add the website to my home screen (Safari, Share->Add To Home Screen).
The issue I'm running into is that when I view the web app in Safari, the 300ms click delay is removed, however, in full screen mode (when opening the app via the home screen icon), the 300ms click delay persists.
As a very simple example, here is a codepen with 2 radio buttons with the meta tags set as I mentioned above:
http://codepen.io/cgat/full/ZBwYyW/
If you open this pen in mobile Safari and add to the home screen, you'll see the delay in radio clicks.
I'm testing with an ipad air.
First I have to say that I am new to this web app home screen button theme.
These lines:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
worked cool for me so far, yet there is a problem when orientation is changed from landscape to portrait. Then the app cuts of just the part where the browser chrome was and leaves a white field instead on the right side.
Strangely when I start in portrait mode and then change to landscape all works well as supposed to back and forth.
How is this to be avoided?
Thanks so much for help
Garavani
The following code solved my problem:
$(window).on('orientationchange', function() {
// only necessary for home screen use
// otherwise blank space is left where the adress bar was (on orientation change from landscape to portrait)
document.body.scrollLeft = 0;
} );
Does anyone know an easy fix to make scrolling possible when using an iframe and fancybox2? The ipad, using mobile safari, still does not appear to allow scrollbars or touch scrolling
Do not show scrolls, just open fancybox with the height of the frame content, then user will scroll through popup as he does in usual window.
In the iframe template add mobile metas:
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Call fancybox like this:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
$("a.fancybox").fancybox({
'scrolling' : 'yes',
'type' : 'iframe',
'autoSize' : true,
'autoResize': true,
'fitToView' : false
});
}
You might want to set the width.
That works for me.
I have a web app running on Safari on an iPad. I am starting the app from the iPad home page. I want the app to start in full-screen mode, and to continue running in full-screen mode (i.e. not showing the Safari address bar).
I want to prevent the "pinch-to-zoom" and pan/zoom functions so the page always remains static. How do I do this?
If you put the following meta tag into the html output and then start the app from the homepage then it will be fullscreen when it runs:
<meta name="apple-mobile-web-app-capable" content="yes">
The following is to prevent the user from zooming:
<meta name="viewport" content="width=device-width,user-scalable=no">
I have a web app running on Safari on an iPad. I am starting the app from the iPad home page. I want the app to start in full-screen mode, and to continue running in full-screen mode (i.e. not showing the Safari address bar). I have therefore added the following meta-tags to the site master page:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width">
I start the app from the iPad home page and it starts nicely in full-screen mode (not showing the Safari address bar) but when I click a to another page in the site (with the same meta-tags, as inherited from the same site master page) then the address bar suddenly pops into view (and remains in view). The link looks as follows (I am using jQueryMobile):
Home
How can I force the web app to remain looking like a 'native-app' by keeping the address bar hidden when navigating between internal pages?
It would appear that Mobile Safari does not 'natively' support full-screen if you use external links. As soon as you use an html anchor then it flips out of full-screen mode. The window.scrollTo may be a workaround that will work for some people, but I also want to avoid the way that the UI flips itself when transitioning to the non-full-screen mode too.
The answer is to use window.location.assign(). This keeps the full-screen app in 'native' full-screen mode. You just need to refactor your tags into javascript window.location.assign(url) calls - that then keeps the thing in full-screen.
Add jQuery and you don't have to modify any links,
$(document).ready(function(){
$('a').click(function(event){
event.preventDefault();
window.location.assign($(this).attr('href'));
});
});
Example link:
Next page without safari
maybe this: source
// When ready...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});