Later edit: issue was jquery mobile.
I have an app built with phonegap and jQuery mobile. Everything works perfect until input is focused and keyboard appears. After this, if I'll switch orientation, viewport is broken.
Example :
Home screen (portrait)
Home screen, changed orientation
Home screen (portrait) with input focused
Home screen (landscape) after input was focused
As you can see in #4, viewport is broken.
I'm using fixed viewport size (width=640, user-scalable=no). Also tried to use scale programmatically on orientation change, change viewport on orientation change, but it didn't work.
Any suggestions?
Thanks!
Related
I am writing an application that runs on Android TV 5.1 or newer that uses the WebView as the display rendering engine. I am able to set the desired display orientation, but the WebView rotates back to landscape within the display and maintains the correct aspect ratio.
I have tried using CSS to perform a transform but the aspect ratio is not correct. I have not found a method to force the WebView to rotate and fit the parent window.
Is there any method to set the orientation and size of the WebView itself? I see the same behavior on multiple devices.
This behavior is device specific. Some of the devices I have tested rotate as expected, another device rotates the display, but the WebView rotates back into landscape. The remaining devices I have tested do not rotate at all.
I will make this will be a known limitation of running this application on Android TV devices.
I found Intel's App-Framework to be light-weight and fast. However, I am facing a problem that I just can't seems to overcome. In the framework, one can display a navbar that 'stick' to the bottom of the screen. This work fine on the browser, WebView in Android and UIWebView in IOS - except on iPhone with 3.5" screen - the navbar just didn't show up. It appears that the screen is too short to show it.
I have tried playing with "viewport" meta tag by setting various 'height' and disabling & changing OS theme. Nothing works. Anyone has experience on this? How do I adjust the navbar position?
As it turns out, it is not the problem of App-Framework; it is the way UIWebView is placed on the view. After correctly setting UIWebView's top and bottom constraints, I am able to see the navbar correctly set at the bottom of the screen.
I have an app which runs only in Landscape mode. All working well. But I have few pop-up views like Apptentative feedback view and Twitter Sheet view, works great when in portrait mode. So how can I change orientation forcefully when loading these pop-ups and back to landscape when these pop-up closes.
You can't force an orientation change. You can only support changes in orientation. IE moving the device 90 degrees to the right.
iOS6 introduced a new full-screen mode for Mobile Safari. It is only available in landscape orientation and hides the browsers top and button bar, as well as the devices status bar.
How is it possible to detect the new mode using media queries? I tried using the width media query, but couldn't get it to work.
I was able to differentiate them using JS document.documentElement.clientHeight, which returns 208 on default and 320 on full-screen mode.
Btw: I'm not talking about starting the app from the home screen, which is a different kind of full-screen mode.
So, height is 320px, orientation is landscape. Here's the media query:
#media only screen and (height : 320px) and (orientation : landscape) {
/* rules here */
}
I have a web page that works no matter what size the viewport is, so it shows up well on iPad in either landscape or portrait mode. However, when you rotate from landscape to portrait, the iPad zooms in, and when you rotate back it doesn't zoom back out again.
Is there a way to make it zoom back out? Or not zoom in in the first place? The app should be fullscreen most of the time, after all.
I've tried playing with meta viewport, but disabling user scaling just means once it automatically zooms in you're stuck and you can't zoom back out again.
We have disabled user zooming and have used a media query to tell users to keep their device landscape for the best experience (it's a web based presentation) but if they have the device portrait at all it messes up the scaling when it switches back to landscape and they can't get back to the original state.
Update:
Worked out a fix for this issue. You need to make sure that the viewport meta has maximum and minimum scales set to 1 as well. Eg:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">