I am developing a mobile web site using Sencha Touch. In iOS7 Safari I cannot make the top address bar & the toolbar below go away. Sencha used to handle this upto iOS6 but some recent changes in iOS7 is causing this issue.
http://java.dzone.com/articles/safari-ios-7-and-html5
I read the above link & it seems this is also an issue for HTML5 Games & a few other apps.
The old window.scrollTo() which worked for iOS6 no longer works.
Add minimal-ui in your meta tag viewport, this will hide he address bar and browser controls in safari iOS7:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
More info on iOS7 and fullscreen mode for mobile websites: http://blog.initlabs.com/post/81716286465/how-to-display-websites-in-fullscreen-mode-in-ios7
With iOS 7 I don't think you really have a choice. Obviously Apple doesn't want developers doing this anymore, and even if someone finds another workaround it probably won't stick around for that long.
Honestly, I think getting fullscreen functionality is a fair trade off for users to install the app to their home screen. Obviously there are certain cases where this isn't true, but I guess I find it understandable to some degree. You should still be able to add the following meta tag and it will be fullscreen once added to home screen:
<meta name="apple-mobile-web-app-capable" content="yes">
There are a few nice libraries out there that add an "add to homescreen" prompt that you can set up to be rather unobtrusive with custom messages. In this case, might be best to embrace the change...
Related
Really hoping you can help me with this strange bug. Ever since updating my phone to iOS 9 my website: https://verweij-juristen.nl seems to be locked. When people visit my site they can't navigate. Also the footer crosses wright through my mobile slider. Even when I turn slider off it still shows and the website still hangs.
It's only on iOS 9 :(
Looking forward to any input :) I'm desperate lol.
iOS9 messes up with the viewport meta, you have to tell it to scale your site maximum at initial scale which should be 1.0
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,shrink-to-fit=no"/>
This is a meta configuration that works with iOS9
My site used to work in full screen when I created a Web App for it, however lately it doesn't show in full screen anymore. Is there something that has changed with the new iOS version or a new Safari version?
I still have the meta tag : <meta name="apple-mobile-web-app-capable" content="yes">
Just to confirm, I am refreshing the website and adding the bookmark to the home screen. I can't seem to figure out what has changed.
Thanks
RF
This is a subject that gives us a lot of problems whenever IOS is updated. So now iOS 9 is here we have once again been searching for answers. I am happy to say we have found a fix and it may well work for you too.
For iOS 8 we found that adding the following meta tag
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimal-ui">
... and scrolling the page about a bit and back to the top using JS would do the trick - which no longer works with iOS9
window.scrollTo(0, 1);
window.scrollTo(0, 200);
setTimeout(function() {
window.scrollTo(0, 1);
}, 100);
But, what we have now found is that changing the meta tag slightly has once again rectified the problem (notice the scale):
<meta name="viewport" content="width=device-width,initial-scale=1.01,minimal-ui">
I have a problem with the KeyboardShrinksView feature that is included in Phonegap 2.6 (ios).
When I tap in the textarea where I want to include text, the keyboard appears and the webview is contracted as I wanted.
The problem is that I lose the focus on the textarea and the user has to tap again in the text area to start writing in it.
Is anyone having the same problem with this new feature?
Thanks!!
add a tap (or touchstart) event on your input which will focus on your field.
element.on("tap", function(e){element.focus()});
The issue comes from the fact that focus is done on ios using the ghost click event. But the view has already changed (because of the keyboard) when it's fired.
This problem will be even more common on ios7 since KeyboardShrinksView is the default behavior...
After the web view is contracted try writing this code.
[TextFieldOnWhichFocusIsExpected BecomeFirstResponder];
I ran into this problem for iOS after upgrading from Phonegap 2.9 to 3.1. Solved by adding height=device-height to my meta tag, so it now looks like this:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no">
So you can make a website go "full screen" and hide the addressbar/chrome on ipad if the user adds your page to their home screen, which makes an icon on the home screen that they launch your site from. You just put some meta tags like this:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
However, I haven't been able to get a site to hide the browser chrome when the page is just in a normal browsing session (the user hasn't launched your site directly from an icon on their home screen). Is it possible to do so? How?
According to the Apple Docs it doesn't specifically say you can't (however as you've noted, it appears to only behave as desired when the site has been added to your home screen).
I also noted that on the Apple Support Forum the consensus seems to be that you need to launch from the home screen to get the desired effect.
Quote from Docs:
apple-mobile-web-app-capable
Sets whether a web application runs in full-screen mode.
Syntax
<meta name="apple-mobile-web-app-capable" content="yes">
Discussion
If content is set to yes, the web application runs in full-screen mode; otherwise, it does not. The default behavior is to use Safari to display web content.
You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.
Availability
Available in iOS 2.1 and later.
I found this works,
$('body').delay('1000').animate({ scrollTop: '0px' }, 'slow');
I noticed that scrolling down removed it, so scrolled 60px (height of the chrome), but that hide it and scrolled down the page, but a scroll of 0px, assuming your page has started at the top (not on a # target), fools it!
I guess you could even remove the delay and animate, but I wanted it to be smooth, and not too jerky.
I developed a web app for the iPhone which has a page with a textarea widget. When I begin editing the contents of this textarea widget Safari zooms in and makes the text really, really big. Now I can't see the document anymore, just a little postage stamp sized piece of it.
Are there any properties I can set which will keep mobile Safari from doint this? I just want the textarea font to stay the same size when I edit its text. Thanks.
You can add:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
to your HTML header.
You would need to set your textarea font-size to 16px and have an initial-scale of 1.0.
But if your app is not really designed for the iPhone, that is, if it’s essentially a normal web page that users should be able to scale, then you should probably just become okay with it. The worst thing to do to your users is show them 6pt text they can’t zoom, you know? Some of them won’t have perfect vision.
See also: Apple's list of all Safari/iOS special meta tags.