This question already has answers here:
How do you keep an iPhone/iPad web app in full screen mode?
(6 answers)
Closed 8 years ago.
I'm trying to figure out the most efficient approach to tackle an issue. I have wonderful WP themed website that I want to show full-screen on my iPad. Here's how it currently operates:
Once a user has saved the website to their iPad via ‘Add to Home Screen’, the site will launch full-screen (absent any Safari interface) when that icon is pressed. However, a new tab is created with Safari interface items visible once the user clicks on any menu item. I want to keep the full-screen experience (without tabs) while the user remains within the site. I only need this to work when launched from home screen icon in the latest iOS.
1) What is causing the site to launch a new tab? Default mobile safari action due to lack of full-screen code, the way the nav URLs are coded, or other?
2) Is it just a matter of adding some header code to the remaining pages (via child theme or directly to the theme templates)?
Here is the website: http://www.sofla360.com
I've dabbled with the iOS full-screen code previously, but nothing very complicated nor with a WP theme. Figured I'd start here in case anyone had some insight on this topic.
Thanks!
The code I found here works with 99% of my WP-themed website. I created a child theme and placed the code in the head section of the header.php file.
Related
I'm using Universal links and everything is working perfectly but I can't seem to hide the Open in app banner which shows in the safari. Is there any way to do this?
There's nothing you can do about that really, it's a feature of Universal Links and gets injected automatically by Safari.
Usually, they're hidden until you overscroll the content.
What goal you are trying to achieve by using Universal Links?
Usually developers are using Universal Links if they want for all/part of the website to be viewable in the App. From this point of view, screenshot you posted is a failure, because Universal Links failed to engage. Possible reasons can be if navigation to the Universal Links domains happened as redirect.
If there are specific pages on your website that you don't want become viewable in the App, you can use exclusions list in associated domain file. Check out this example http://amazon.com/apple-app-site-association . In this case navigating to the "/ref=nodl_" will not open the Amazon and will not show the banner you are mentioning.
Hey you can hide the smart banner by edit your apple-app-association file in the root directory of your website. You can control the banner on the pages you want to show.
you cannot hide the banner while using the universal links at the same time.
You can only hide the banner where you do not want the universal links to work by restricting the paths in apple-app-association file.
If you want to hide the banner form all the pages just add
"paths":["NOT /*"] in details object in this case universal links will not work.
There seem te be some subtle differences in the Implementation or configuration between WBWebView and Safari (and SFSafariViewController) that renders a part of the Website I want to display unusable.
Here is what I am trying to do:
Basically all that is needed is an "App" that just opens a specific website in fullscreen mode, so no chrome, URLs or additional navigaton buttons are present. The Website works fine on Safari on iOS (and every other (modern) browser on desktop or mobile) but the menu does not when embedded in the App.
All I did was creating a new single view Application in Xcode, drop in a WKWebView and have it load the URL. The part of the page not working is this menu component that is used throughout the site: http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/ So basically the user has no way to navigate. While debugging the website it seems like when I push the menu button the menu does not expand like it should because the changed css classes dont get picked up correctly. If I manually toggle the css classes on the menu-element it gets displayed correctly. It makes me wonder if there are some additonal constraints related to WKWebView?
Can anyone tell me if there are any settings or configurations I can alter that allow the website in WKWebView to behave exactly the same as it would under Safari?
As far as I understand SFSafariViewController I always get the browser toolbar and navigational elements which I dont want to have in the app, so that is not an option- or is there a way to get rid of that?
Any help or pointers would be greatly appreciated :)
I'd like know if there's away to run a bit of code only after it's been installed to the home screen on iOS. This is for internal use only so I don't need it to work on other platforms. Just iOS.
Basically, I want to add a few custom icons to iOS devices that do specific things. One will open a PDF and that's the one I'm having a hard time working with.
So, here's the flow...
User goes to URL on their iOS based device, there is nothing to see here, but then they add the URL to their home screen. Once they click on the home screen icon, the page opens and redirects to the a PDF that lives online. The pdf can live online since they will always have wifi.
Any suggestions?
With reference to the question I asked couple of days back, it seems to me that address bar cannot be hidden from a xpages mobile web application when it is launched from a href link. Choice is limited to href as "location.assign" or any javascript will not work on mails accessed by lotus traveller. I tried almost 20 different variations published by other experts to hide address bar and none seems to work. Am I wrong in stating that "it is not possible to hide address bar in Xpages mobile web application on ipad when not launched from home screen"?
The following works on iPhone and iPod Touch (and is similar to the solution I linked to in the answer to the other question that you mention).
Create a client-side JavaScript library with the following logic:
function hideAddressBar(){ window.scrollTo(0, 1)}
window.addEventListener("load", hideAddressBar, false);
Add the following to a layout custom control or similar in order for this to run on all the XPages where you want to hide the address bar (here I assume that the client-side JavaScript library is called addressbar.js:
<xp:script clientSide="true" type="text/javascript" src="/addressbar.js"></xp:script>
Have a look at the ITANA Tasks project on OpenNTF which uses this solution to hide the address bar.
For iPad it is not possible to hide the address bar when running in Safari. To hide the address bar on iPad you need to launch the app from the home screen (and set the usual required meta tags).
I'm writing a web app for the iPad using HTML5 and SenchaTouch. The app uses cache manifest to function offline. Once it has been added in the home screen and opened without Safari, it will refresh itself every time it is opened, even if just navigating to the home screen and back. The desired behavior is to leave the app, do something else, and then come back to the app with everything untouched.
An example of a similar app that displays the same (undesired) behavior can be found here: http://ignitedmediadesign.com/WebApp/index.html
I've read that using a cache manifest should have solved this problem on iPhone ( http://www.stevesouders.com/blog/2011/06/28/lack-of-caching-for-iphone-home-screen-apps/ ), but doesn't seem to have done the trick for either iPhone or iPad.
Is there another way to fix this? Is there some secret to cache manifest files that stops this that I may have missed?
I'm under the impression this is simply the nature of the "home screen" web apps that operate outside of normal Safari. I have an app that operates just fine in Safari with some minimal state saving, but the blasted non-Safari version refreshes every time. EDIT: Even the showcased O’Reilly example that uses a cache manifest reloads every time when added to the home screen.
You may want to look into creating "routes" (URL fragments) that point to a controller/action pair. Look into the MVC PhoneGap example (If not using PhoneGap, you can scroll past all of that stuff and implement your own data model and store). Also see this Sencha Touch MVC tutorial.
Also, most of the rendered sencha touch components seem to maintain state between changes of the active item. For example. I have a main TabPanel that contains all sub panels. When switching between tabs on the main TabPanel's TabBar, each sub panel maintains its rendering, unless I've set a listener or controller action to do otherwise.
Hope this helps.