I am trying to write a web app for Android and iPhone.
I have an issue when the device orientation changes. On the Android the orientationChanged event fires (from portrait to landscape) before the new horizontal dimensions are reported (reports portrait dimensions, with iPhone it fires AFTER (reports landscape dimensions...correct behavior).
So I fell back to the resize event. Another issue cropped up. Android works fine in browser. iPhone is works fine when the app is launched from the home screen. However in mobile safari, the resize event is never triggered when roating from landscape to portrait, since the browser just provides you the capability to scroll around the page horizontally.
I need a way to detect an orientation change event and get the new dimensions from DOM elements in order to resize other elements on the screen that will work for Android, mobile Safari and home screen web apps.
Thanks
Fell back to device detection, since there is no reliable way of doing this generically.
Related
Is there anyway to avoid Facebook opening a link in its own web browser or to show it on landscape mode? I've noticed it has portrait orientation locked and my app needs to be run over landscape, but it seems to not allow you to rotate the device.
Thanks in advance!
2021 here, and Facebook iOS browser still doesn't rotate with the device.
I created an Iphone app and I am trying to convert them to Ipad screens. I have a login page which was created for Iphone, I tried to change it to Ipad by changing Project Settings screen and changed the emulator. But the Login page looks weird on Ipad Emulator, controls are get stuck to the upper left corner. How can I fix it to look centered on Iphone and Ipad?
here is the screen on xcode
here is the screen on emulator
You need to adjust the autolayout settings for each object.
http://www.raywenderlich.com/20881/beginning-auto-layout-part-1-of-2
An iPad app can support inclusion of launch images in both orientations; presumably, if your app supports auto-rotation, then this would suggest to me that if the user launches an app while the device is in Landscape mode, then the Landscape launch image is used.
But in all the apps I've built and released, this has never been the case. Never once has the Landscape launch image appeared, only the Portrait. After loading, the app will auto-rotate to whatever orientation the device is in, but at launch, it assumes you are in Portrait. Always.
Why?
I have seen many other apps in the store that behave this way, but then there are some seem to always automatically know immediately at first launch, from that first launch image, that you are in Landscape, if that's the case.
How is this done?
iPhone supports only portrait images (http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW5)
Apps that don't support portrait orientations, provide the same portrait oriented image. For example, Angry birds on iPhone has the same portrait oriented image but the guys painted rotated graphics on it.
As it would turn out, the issue was due to leaving out the supported orientations in the plist file for the app. You can add these manually or just select them in the Target page. More details here:
How to get a landscape launch image to actually appear when launched?
I have a universal iPhone/iPad app that I'm in the process of completing. This is a music listening app that connects to and allows you to listen to music off of a user composed music site.
Since the user base for this app will be very small I've decided to put iAds in to try and get a little recovery on the programming costs.
The app is xib-less meaning that I create all components and draw every view manually. I have all of the code in place to place the iAd on screen and off screen for its various states. My app supports all rotations of all devices and my screens correctly reposition all components for every possible orientation.
After digging deep in the documentation I found that Apple always displays tapped on iAds in portrait mode. If my device is in portrait mode (upright) then there is no problem. However if I'm in landscape or upside down (yes it makes sense for this app), then the iAd displays in portrait but when closed my app is a mess.
The best way I can describe it is that each of my display items has a frame which I manually set to position it where I want it for each orientation. This works perfectly until the user taps on an iAd. The modal iAd dialog comes up then after it is closed even if I force a reposition of my components nothing draws correctly.
I've checked the view frame coordinates before and after the ad and I see some minor shifting. But what is so strange is that my components even when forced to their frame locations I desire are just a mess.
Any help would be greatly appreciated. Here is a link to the screen movie incase
embedding doesn't work: http://www.screencast.com/t/1pSwUI3EiMF
We have an offline Safari application with UI designed for vertical use (pixel perfect). We would like the UI to stay vertical no matter what how the user rotates the ipod / iphone. Is it possible with offline Safari application?
This question is exactly the same as Can I prevent mobile safari from auto-rotating the screen on ipod touch or iphone? . Yet - the referenced question has no definite answer and has been prematurely accepted.
I'm not aware of any way to prevent the rotation if it needs to run in Safari rather than a native app with an embedded UIWebView.
While you can't prevent the rotation, you can compensate for it like this:
Detect the rotation using the updateorientation event
In your event handler, find the current orientation using window.orientation. (e.g. 0, 90, -90, 180)
Update the class of your element to reflect the current orientation, and use styles like -webkit-transform:rotate(-90deg) to rotate your UI in the opposite direction.
If necessary, use window.scrollTo(0, 1); to scroll the address bar off the screen.