I'm using a full screen UIWebView to house/render an HTML5 application under iOS. Very much like Cordova/phonegap although I'm not using those. I try to make my webview size match the underlying display. Unfortunately, on retina displays, the value returned by self.view.bounds relies on the UIScreen scaling factor. So I get 1024x768 instead of 2048x1536. Not a huge problem except I then instantiate the UIWebView using the smaller bounds (after adjusting for the status bar) and some things get a bit jaggy. In particular, I use canvas at a couple of points and also rounded borders appear thick. To be clear, this isn't a case of scaled raster resources.
I'm not getting the full resolution of the screen using that UIWebView. Ideally, I'd like to set the screen scale to 1.0 but that doesn't appear to be supported. Any suggestions on how best to get full advantage of the screen?
The problem is most noticeable on the iPhone 5 simulator. I don't have that hardware to test on. iPad/new iPad I think has the problem but the jaggies aren't as noticeable.
Update: The more I look at this, the more I think it may be restricted to canvas.
Solution: In case anyone else gets here. Based on the answer below, I created all of my canvas elements with width and height multiplied by window.devicePixelRatio and then set their style attribute to have the original (device independent) size.
See https://stackoverflow.com/a/7736803/341994. Basically you need to detect that you've got double resolution and effectively double the resolution of the canvas.
Related
So I am quite new to Unity Development, and I have run into a problem. I have two UI's in my game (two buttons), however, when I change the device from an Iphone 12 (landscape) to a Iphone 11 (landscape), the UI's ratio goes all whacky and it changes size. Is there any way I can prevent this? I will link photos below
So this is what it looks like if the camera is in the Iphone 12 landscape 'mode'
and this is what it looks like in Iphone 11 'mode'
The ratio and size of the UI goes all whacky. How do I fix this?
(a picture of my canvas inspector
One thing that comes to mind is to change the Canvas Scalers UI Scale Mode from "Constant Pixel Size" to one of the other options, depending on what works best for you.
Unfortunately, "Constant Pixel Size" is the default value and it usually breaks everything when building a full screen UI.
For canvas settings, use the "scale with screen size" option and play around with the values. If most of the resolutions look fine but there is a spesific one that straight up breaks your UI, you can write a script to check if its that resolution and change the canvas values.
For UI elements you can play around with the setting I circled in red.
Also you might want to check this thread.
Is there a way to have each preview/simulator match the look of the storyboard, look for look, regarding the same location and aspect ratio no matter the screen size? In other words, in my storyboard I have the look I am looking for. What properties/details would I have to add to have the storyboard be replicated the same despite the different iPhone resolutions? The iPhone 5.5" looks incredibly close to my desired results while the 4" cuts some of my buttons off? What am I missing or what should I add?
This is what Auto Layout is for. Your Storyboard is a fixed size whereas there are many different device screen sizes. That's why you use Auto Layout to position view relative to one another so that no matter the device, the layout looks right. In your case, your content will probably need to scroll to fit in all device screen sizes.
Yes. The reason behind this is vector image generation during stretch in or out. If you convert it into raster images. Expected result is not guaranteed.
I have a working SpriteKit app for my iphone 5; however, when I run the same app on my iphone 4* the background image gets clipped and my obstacle height calculations break. I have tried different scaleModes as well as adding a background.png and background#2x.png, but the smaller res picture is not working. I can determine the size of the display and explicitly pick the right image file, but this does not seam as elegant as I would have expected.
Yeah, I believe that in your case you do have to check the size of the display. As inelegant as it may be.
Check this answer out:
iOS not using -568h#2x.png
I'm currently working on an OpenGL game, and recently began refactoring it to support iPhone in addition to iPad. In an attempt to give myself as little work as possible, I simply resized the containing EAGLView to 480 x 360 (to preserve the iPad aspect ratio) and shifted the view up so it's y origin lay at -20 (in order to centre the content, and as the edges could be cropped).
I found this resulted in jerky performance on the device (despite the CADisplay link reporting a frame duration that equated to 59-61 fps) and was at least 20% slower when compared side by side with the iPad version.
I then tried resizing the view to the screen size 480 x 320 and the performance returned to normal (though the rendered content no longer has the correct aspect ratio).
Why is it that the 'off screen' rendering causes a performance hit and why does the displaylink still think it is running at 60fps?
Any ideas?
Thanks
This is mostly a wild guess, but what about clipping regions? There was this hardware functionality that made it possible to mix windows and hardware accelerated graphics. Maybe it is not implemented very well on mobile devices.
You could, however, avoid making the UIView offscreen and try to use glViewport() to shift the parts of the view offscreen. While it seems to be the same, it is handled by a different part of the pipeline (the rasterizer), and should be much faster.
I displays a splash Screen when my app loads,There is a background image in the splash screen,I problem is how can I make fit this image in all types of blackberry models?
Keep in mind that many BlackBerry devices have different screen resolutions and even different aspect ratios. So if you just use a single image and resize (stretch and/or squish) it to fit the current screen, you're going to distort the image (or pattern). As I see it, there are two main approaches:
1) Use a different image for each screen resolution. There are about 7 different resolutions that cover most of the in-market devices (240x260, 240x320, 320x240, 360x400, 360x480, 480x320, 480x360)
2) If it's a regular background pattern as opposed to a picture or logo, just have one image in the app that's big enough to cover the largest screen size (480x360) and for all other screen sizes just clip it. In fact, I think this should happen automatically if you just set the background image - anything that can't be displayed on the screen will be clipped.
While approach #2 is better in terms of reducing application size, I'm going to guess that since you're asking this question the background you're thinking of using isn't a regular pattern.
I think the simplest method would be to use the setBorder method of whatever screen/field needs a stretched background. For example:
Border b = BorderFactory.createBitmapBorder (new XYEdges (), bitmap);
field.setBorder(b);
In my experience this results in the background image being stretched and provides the simplest method for fitting the size you need. I have only ever used it for fields though and never a MainScreen so it might not work for you.