My team is developing a web application which has a full screen option in some sections. On Chrome, FireFox and Edge, the full screen option works fine. However, on safari ios, when entering full screen mode, if users touch and pull down the screen, it will exit full screen mode. Is there anyway to disable this action?
The only way I know to solve this is to have your users add the site to the home screen.
I think you can also detect if it's been opened via the home screen.
Related
I want to know is it possible to set custom resolution and browser size in browsers based on webkit with anyway ( javascript or programmatically ) in my case i try to set in awesomium.
more description :
While browsing the web, I need to set fake screen resolution to any websites. for example if I load a site in full screen mode which has 1920x1080px resolution I want that site think my screen size is 700x800px and my browser size is 500x500px or something else but still be able to browse in full screen mode.
I found this for Firefox, chrome and IE I want something like them in web-kit or awesomium and access to that option programmatically. is it possible ?
click the phone+tablet icon in chrome dev tools to enter device emulation mode. You can then enter custom sizes. It should work fine in fullscreen. You cannot do this programatically.
I'm using Crosswalk webview on Cordova to display a webApp made with Ember.js.
In some pages the app have iframes which open a Vimeo player, and I allow them to play in fullscreen.
When the user plays it, it enters fullscreen automatically, resizing the page to increase its height. But, if the user closes fullscreen (or when the video ends and the fullscreen closes), the page isn't resized back to the original height, and my top menu gets hidden behind the mobile status bar.
If then I navigate to another url, the page gets resized and everything is beautiful again.
My question is: is there any javascript/CSS trick I could try to get around this?
INFO: I tested this against 2 phones, one Android 4.1 and the other Android 5.0, and it only happened in the Android 5.0 one. So maybe this is a Crosswalk bug. Doesn't happen at all if I use the native webView, but I wanted to avoid switching to it.
Any help appreciated ;)
I have a customer that wants to launch a certain website from an icon on a tablet that runs Android. He's leasing out the tablets, so we have complete control over the hardware. The idea is that these tablets will only be used for his site (it's a type of slide show), so he wants the tablet home screen to have a single icon, and that icon will always launch his site in complete fullscreen. This works somewhat, but the statusbar does not go away without a user gesture. On Chrome the meta tag mobile-web-app-capable does the trick, but we can also use other browsers if this simplifies things. Is it possible to remove the statusbar without a second user gesture (the first being launching the website)?
And in response to the answers below, how can a WebLauncherActivity be useful when the user is just opening a browser?
On the page, element.requestFullscreen() displays the element in fullscreen mode.
Additional JS API and CSS selectors can provide other fullscreen specification in the following html5 article:
Building an Amazing Fullscreen Mobile Experience
Try using the WebappLauncherActivity that's used by the page shortcuts.
You should be able to launch the activity via adb with:
adb shell am start -n com.android.chrome/.webapps.WebappManager.ACTION_START_WEBAPP "url"
You can also add your own activity inheriting from FullscreenActivity which is the base for WebappActivity like mentioned by #tushar-pandey.
I have a webpage that uses the history api to navigate between pages without complete page refreshs. It all worked great on desktop and mobiles until the last chrome update (38.0.2125.102) on Android (4.4.2).
The problem is with the full screen mode of the browser: when the user comes to our site there's a link to a video gallery, he clicks it and a lightbox opens up with a vimeo embedded video in it. He then taps the video to watch it and it goes fullsceen (a message appears on top that the browser is in fullscreen mode). If the user closes the video like suggested (by dragging down from the top) everything works as expected, but if he taps the devices 'back' button, the browser kinda closes the video (I can still hear it play somewhere) but doesn't really leave the full screen mode (messing up stuff until the user drags from the top).
I'm able to detect when the user has tapped that button, and my question is can I force the browser to leave the fullscreen mode through javascript?
Thanks
As stated on the comment above:
On back button click you can check if the current document is in full screen (document.webkitIsFullScreen) and in case cancel it (document.webkitCancelFullScreen();).
I am seeing problem happen only on iOS 6 but working fine on below iOS 6 version.
My app is loading image from a link which need to enlarge its image pixels to populate within size of UIWebView by using Javascript. The link image is originally in pixels 140x24.
I see it is running over the line, but the image not being scaled up using iOS 6 simulator. It does work in iOS 5 simulator. Please help.
(void)webViewDidFinishLoad:(UIWebView *)webView {
[webView stringByEvaluatingJavaScriptFromString:#"document.getElementsByTagName(\"img\")(0).height=\"30\";document.getElementsByTagName(\"img\")(0).width=\"280\";"];
}
The syntax in javascript to get the n-th element of an array is using square braces, not parentheses. So use document.getElementsByTagName("img")[0] not document.getElementsByTagName("img")(0).
Not sure why it was working in iOS5, WebKit is probably more strict in iOS6…
Additional tip: to debug javascript errors on iOS6, a new feature makes it very simple:
Go to the "Settings" application in your iPhone, enter the "Safari" settings and tap on "Advanced" at the bottom, then enable the "WebKit Inspector" from there
Display your page to be debugged on the screen (i.e. launch your app and go to your screen that contains the WebView to make it visible)
Plug your iPhone to your Mac via your USB cable
Open Safari.app on your Mac, go to the "Development" menu (1), select the menu item with the name of your iPhone and select your application in the submenu.
You will then be able to debug your web page presented in your iPhone using the powerful Web Inspector from your Mac, and can look into the javascript console, the DOM tree, etc.
(1) If you don't have the "Development" menu in Safari on your Mac, you can enable it in the "Advanced" preferences tab of the Safari application.