I have several jQuery UI dialogs in my website. They are set to render in the centre of the screen.
When accessing my website on an iPad, the dialogs function fine in both orientations. But if the dialog is open and I rotate the iPad, the dialogs lose their positions.
Is this a common problem?
Is there any solution for this? Forcing the dialogs to re render on orientation switch perhaps?
Related
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!
I am building an app mainly for tablet or iPad, but I just noticed that the design is meant to only for landscape view. I tried the portrait and it doesn't look good. Though before I keep programming the app I want to know how I can handle this, or prevent the user to see the app in portrait.
I checked and I know that for android I can use something like this:
android:screenOrientation="sensorLandscape"
but what about iPad?
I would like to have something more "universal" if I can say
I am using HTML5, JQuery and to handle the swipes I am using Hammerjs nothing else, I didn't use any mobile framework, cause it's more of a carousel with some text and images.
on iOS it's a simple configuration in the Xcode App Target, where you just allow Landscape Left and Landscape Right.
if you are using UIKit for building the app, you can configure it for every instance of UIViewController
UPDATE: (Solution for HTML)
combine the css rule "transform: rotate(90deg)" with css media queries on device orientation, but it will be tricky to get everthing to run properly....
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.
I'm building a mobile site with jQuery Mobile and use Photoswipe to open upp images from a slider.
The problem I have is that the pinch zoom works different if the mobile web site is opened in mobile Safari or from a home screen icon.
Scenario 1 - Open the website in mobile Safari.
Everything works fine, I can click on the image in the slider and the Photoswipe layer opens up. I can swipe and pinch zoom without any problems at all.
Scenario 2 - Open up the website from an home screen icon.
When I try to pinch zoom the image there is a black screen for som milliseconds then the image shows up. I can also see that something is loaded if I look on the topbar on the phone (where the icons for wifi etc. are placed) during the "black screen flicker". This doesn't happen in scenario 1.
I use the latest versions of jQuery mobile and PhotoSwipe.
Anyone with any clues of why it behaves differently?
I am building a website using the twitter bootstrap base so that i can have a site that works on the ipad and also touch phone devices.
So far my site looks great in all browsers, PC ipad and phone however ipad only works fine in portrait. When in portrait it has the lovely button in the corner which opens the expanding menu.
I want this to work on the landscape one too but can't seem to get it to work.
Could someone please advise me whereabouts in the CSS I need to look and also if possible what screen size I am looking for to make the collapse bar appear in landscape.
Answering my own question.
Just incase anyone else has the same problem:
iPad screen resolution is 1024 x 768 so in landscape mode it renders like a full web page.
There are ways to overcome this by detecting the device's browser user agent.
For more information see this:Checking iPad user agent