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 ;)
Related
I have developed an application which records screen, video and audio using HTML5 MediaRecorder. The entire process of recording works without any issues on Windows Machine. But If I access the same web application on Mac Air, I have a strange issue (Refer below scenario)
Recording without screen freeze
Open browser > Start recording. Open another application like word or notepad etc. Keep both the screens stacked side by side.
Recording (screen freeze)
Open browser > Start recording. Open another application like word or notepad etc. Make sure both applications are displayed in fullscreen mode.
It seems the recording works smoothly when the browser is in foreground. As soon as browser window goes in background and another application window is displayed, the video recording freezes but audio gets recorded.
Is there any configuration/setting that can be applied at Mac/Chrome level to ensure applications running in the background are not suspended from display rendering.
PS: The screen sharing permission dialog also doesn't display all the open windows in "Application Window" tab. It just displays chrome tab.
Update 1
The behavior is confirmed after few trials and errors. This is happening due to spaces. Each new application window is getting started in new spaces. Even after turning off the spaces from mission control, there is still a problem. If an application is viewed as full screen, it gets assigned to new display. Same happens with powerpoint presentation mode. Workaround is to make sure that press alt/option key while clicking on maximize button (no fullscreen / no presentation).
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 have an HTML5/JS app that dynamically loads a series of videos into a custom lightbox, but when I exit one of the videos after viewing it in full screen the entire app page refreshes.
How do I prevent the page refresh from occurring?
Note: This only happens on an iPad 2+ running iOS6.0.1. It doesn't happen on an iPad 1 running 5.1.1.
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.