Screenshots
I have a 10 second long animation that refreshes the page after each loop. Works fine on all other devices, but when I view it on an iPad, SOMETIMES it will look normal, but other times it will render at a smaller size, making the text too small to read. This occurs on Safari and Firefox, but Chrome on the same device does not have this bug. I looked at the window.devicePixelRatio and it was showing as '1' on all other devices, but showing as '2' on the iPad. So, I tried setting the window.devicePixelRatio to '1' with JavaScript. That didn't make any difference. Still having the same issue. Also, this only happens in Portrait Orientation, but NOT in Landscape Orientation. Any ideas?
Related
I have a game we're trying to release in the app store for iphone and ipad, and while it works fine on all of our devices (a handful of iphones and ipads), when the app store reviewers try it the actual viewport they see is highly cropped and distorted.
This is an example options screen that the reviewer saw:
This is what that options screen looks like for us on an equivalent aspect ratio/resolution:
As you can see, it's just a small, off-centered square for them, surrounded by black. But we've tested this on devices like an old iphone 5 up to big ipads and have never seen anything like this, the game takes up the full screen and the aspect ratio is correct and not distorted or stretched.
One important detail is this is entirely an OpenGL and SDL program, not using any Apple UI frameworks at all. The render size is determined by SDL_GetRendererOutputSize(), which then is used in glViewport(), and the window is created with the SDL_WINDOW_ALLOW_HIGHDPI flag. This so far has seemed to work with both retina and non-retina physical devices.
Also all of the screenshots they've given us look the same, same little square viewport surrounded by black, so I originally thought they were cropping them on purpose to highlight specific components of the screen, but this appears to be just exactly how it looks for them as this square is in the same position in each screenshot. I've asked them for more information on their devices but they wouldn't tell me.
We also have the program set to only ever use landscape, not portrait, but the weird thing is that with the way our UI reflows, the only way to get that button to look squished the way it does there is if the game was somehow still rendering in portrait, as seen this example shot I took by forcing it to run in a very tall portrait window:
I don't even know where to begin to try to figure out what's going wrong for them though, because as I've said, everything looks fine when running in an emulator and everything looks fine when we've run it on several physical devices. Is there some build or release configuration I could be missing? Some OpenGL setting I should check? I'm just hoping this problem looks similar to something someone else has encountered before.
If you are on an equivalent device, then another thing that may differ is the accessibility settings. Search for display zoom in settings. Also, try locking the iPad into portrait mode before launching your app to try and reproduce.
Note the little double arrow icon in the lower right corner of the reviewer’s screenshot. I don’t know what that is, but it looks like it could be some kind of screen zoom or accessibility mode. Perhaps they can answer what it does, and how to enable it for yourself.
To follow up with the solution that worked for me, I noticed that in my project's General settings in Xcode, under Deployment Info, I had only checked iPhone and not iPad. What I've since learned is that without that checkbox, some iPads will have to run in an emulation mode, which may have been the source of our problem. Deploying a new build with that checked (as well as "requires full screen"), it rendered exactly the same on our own iPads, but the app was subsequently approved with no further problems. I had made no other changes to the program, so my assumption is that that setting likely fixed it.
I'm using a ListView in Xamarin.Forms. I have a problem with the resizing of the rows. When I start my application on portrait mode, the width of the rows fill the screen (as intended), but when I rotate to landscape mode they become wider. So far so good, but when I switch back to portrait again the rows stays the width as they were on landscape mode. This behaviour is not seen on an Android application with exactly the same code.
I've only tested this on the iOS simulator so far. It has the same behaviour on the iPad and the iPhone simulator.
Have I encountered a bug?
When I decide iOS simulator should show anything but normal iPhone, something very odd happens.
If e.g. iPad is placed landscape left to right, it places content layout all wrong. This also happens in its own iOS before any apps is run. See screenshots:
Tried to reset content and settings, but still no luck:
I have a problem when I use launch images in an Air application. I don't know if this is the expected behaviour, but when the app starts, the launch image is first displayed as expected, however then it gets resized for a second.
I don't care too much about this, although since the iPhone images have to take into account the statusbar, the effect is a bit ugly in this case.
Can this be solved? is it a problem with Air? is it expected behaviour?
I noticed a similar problem with AIR 3.2 and a fullscreen, fixed-orientation (landscape) app in iOS - the splash image starts in landscape, then flips to the wrong orientation during loading. I suspect it's a bug but couldn't find a workaround.
Since I don't see any pressing reason to move to 3.2, I'm sticking with AIR 3.1 for the time being, which displays the splash image correctly.
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">