I don't like web-apps for iPhone because they have to run inside the Safari instanace and have the Safari-toolbar at the bottom.
But today when I opened the web-app version of Facebook on my iPhone I got big eyes! This one opens in its own instance in the task manager and it fills the whole screen except the indicator bar on the top of the screen. THIS is the kind of web-app I like, and I'm really interested in how this works! But I've tried to search and I can't find any information about this feature.
To reconstruct the Facebook web-app I'm talking about:
Go to facebook.com or more exactly http://touch.facebook.com/?w2m in Safari on iPhone.
Click the middle button in the bottom bar in Safari and "Add to home screen"
Open the new Facebook web-app from the home-screen.
Every other web-apps I've saved on the home screen this way (e.g. different Google tools) opens in a new tab in Safari. But Facebook opens as a "stand alone" application in a new instance and without the Safari "shell" around.
I know that it is possible to script the onload of the document to scroll down so the address-bar is "hidden", but that's not what Facebook does!
This is done using a specific meta tag.
<meta name="apple-mobile-web-app-capable" content="yes" />
There are a number of these that let you set the status bar style, splash screen, home screen icon, etc.
Do note - JavaScript performance is significantly worse in standalone web apps like this, and you have to be careful about the user experience considering there's no back button.
Related
Hi
I have a website made in Bootstrap4. Works fine until I detected an error specific to Google Android Chrome browser - and his default LITE MODE.
If Im correct Lite Mode = Lazy loading, loads elements when needed (detected by scroll distance I suppose).
But I have an issue with this. This is a onepager - a long website with menu on top. And Im not able to "scroll to ID" from top. Well I can, but I always end up on a imperfect scroll result. If I would call the scroll function again - it would now go "exactly where supposed to".
So I suppose: since lazy loading is on, some elements are not rendered and so the "scroll offsets" of JQuery are broken... The lower I scroll the "exacter" the "scroll to ID" function becomes.
But for users that do not scroll at all but want to click on the menu and scroll down - well they have a problem if they are on android chrome with lite mode on.
Is there any way on to tell the browser "dont do lazy load here" please?
EDIT:
The project is online, if you wish to RECREATE IT follow these steps:
(Android device with Chrome needed)
Have LITE version turned ON.
Open new TAB (this is important)
Visit: https://objednavka.pollitocheesecake.sk/
Scroll slowly to the first product you will see and push the green +
Now a new button "POKRACOVAT POPS UP"
Click on that and you will be send down and end on a "screen between" sections
If you do the same with LITE MODE OFF - you will end up on the next section withou any issues.
Note: Thew part with NEW TAB is important, on a simple reaload the lite version already renders the page and navigation works even on LITE MODE. Its first visits only.
Thank you
Oliver
When clicking a website link from within the Facebook iOS app, the page loads fine (within the in-app browser). But then when you scroll down and then back up, the top is cut off. This is a problem for website with a nav bar at the top, like amazon.com. Is there a workaround for this? One that does not involve the user having to disable the in-app browser. This is aweful when you realize you've spent money sending people to a website they cannot use.
Update: This seems to be an issue with a slightly older version of the Facebook App for iOS. In the newer version of the FB App, this is not a problem.
Even still, I'd like to know if anyone has experienced this and if so, is there an HTML, javascript or jquery solution to the problem. I know I can detect the FB browser, maybe even the version of the in-app browser. But still, what to do then.
I think I am going to try using frames. I guess I could pad the top and bottom.enter image description here
I recently developed a website that fetches mixed http/https content. Due to this, I always get the address bar displayed on top (It doesn't auto-hide like in other websites). Here's what I'm talking about:
This is the link to the website.
The content is fetched from various sources, hence filtering non-https content is not possible. And since the website is meant for reading, a non-full-screen display is painful for the reader. So, is there a way to force the auto-hide behavior?
PS: The website uses Twitter Bootstrap, if it helps.
PPS: I don't want to use the full-screen API, it'll be too heavy for this.
Check this has everything you need
http://www.html5rocks.com/en/mobile/fullscreen/
The Chrome team has recently implemented a feature that tells the browser to launch the page fullscreen when the user has added it to the home screen. It is similar to the iOS Safari model.
<meta name="mobile-web-app-capable" content="yes">
window.scrollTo(0,1);
this will help you but this javascript is may not work in all browsers
I am using the magnific-popup (http://dimsemenov.com/plugins/magnific-popup/) but I don't need to use this one. I have just used it before and it worked well.
My questions is how to actually trigger different lightboxes from inside a SWF?
We have one SWF that has images and animation located at six different sections of the screen. It's sort of a launch page and each section has an image with some animation and when the users clicks on a section another web page will load.
This application will be hosted on a computer with a touch screen and we were using a kiosk app to run the app and it had a small navigation bar built in but now we are using a different operating system that works better with the touch screen hardware (OSX to Windows 8) but does not work with the same kiosk app. I also can't seem to find any kiosk apps that do the same thing for Windows 8.
Instead of using a Kiosk app I would like to just use Chrome in Kiosk/Fullscreen mode and have each section open in a new lightbox window instead of using a navigation bar. However, I can't seem to trigger the lightbox event from within the SWF itself.
Any help greatly appreciated.
In as2 something like this getURL("javascript: lightbox(maybe-attributes);"); or using flash.external.ExternalInterface class. I don't know in as3 if there's another class/method
Christian find perfect match with this jquery/flash.external.ExternalInterface
http://grasshopperpebbles.com/jquery/actionscript-using-lightbox-with-flash/
I'm building a web application (based on Phonegap) optimized for iPhone.
I have to integrate a popup which will open our twitter page and shouldn't fit to entire screen (for a simple navigation problem..how do a user should go back at full screen??).
I've noticed that Safari Mobile opens correctly the new page but ignores my window.load width/height parameters.
This is the incriminated js code :
var twitterLink=$("#twitter a");
var url="http://mobile.twitter.com/test";
twitterLink.click(function(){
window.open(url,'name','(height=200),(width=150)');
return false;
});
I've just tried all other browsers on leopard and work!
My aim was embedding a Twitter Profile Page in the fastest way in a page of my app (which has a navigation bottom bar).
This morning I've tried with IFRAME , but with no luck...are not supported..
Then i've tried with the new Twitter intent but has the same problem as here in safari Mobile (ignoring parameters of popup)
Thanks a lot!!!
I think that's a known bug of Mobile Safari.
By my knowledge window.open accepts parameters without parentheses, so:
window.open(url,'name','height=200,width=150');
this should work.