iPhone 5 screen size black bars - ios6

I am having problems in making my iPhone 4 (3.5 inch screen) work on iPhone 5 screen. I have already tried to import Default-568h#2x.png image for a launch image and it works properly in simulator, and when run on real device there are black bars on top and bottom of the screen. Does anybody have similar problem.

All apps that do not include the Default-568h#2x.png file are displayed in a letter box. Include the Default-568h#2x.png will make your app fill the screen on 4" retina devices.
hope this fix the issue.

You could have tested this issue in simulator itself .
There are two possible solutions for this. Listed below:
In the 'Simulated Metrics' section of UIVIew's attributes inspector, you can choose between 3,5" or 4" sizes. Choose 3,5", and make your views and subviews resizable .This will make it automatically scale your view to fit iPhone 5's screen.
2.OR you can make use of Auto Layout (constraints) with the deployment target of iOS 6+.
Hope this will solve the issue.

Related

Change of orientation performance issue - codenameone

when orientation changes in android, native android call the destroy method and total new layout is to be made as far as I know. But I think codenameone doesn't do that which is a great thing. But when I checked the cn1 app in devices while changing from portrait to landscape a blank screen is seen for a while and then the orientation changes.
My Problem is that when I have many more components displayed in a form,
the blank screen appears for a longer duration and sometime it hangs. Does it
happen as I don't use Orientation listener methods etc or is there anything I
can do to solve this issue?
I just tried this on my device and it worked fine for the latest build on my Android 6 device. There was the rotation animation from Android where the screen rotated into its new place.
I'm guessing the rendering of your screen is so slow that Android takes too long to draw it and ends up drawing a black screen instead so it can proceed with the animation.
I can't benchmark an application remotely but I suggest going over the performance of your app and making sure it is truly optimized.

How can I find the dimensions of an image on a responsive web page?

I am working as a graphic designer. They wanted me design some slider images on a page. But nobody knows the dimensions. I have seen that there are 4 different dimensions for an image when I inspect the page.
Large
Medium
Small
XSmall
So when you enter the website with a mobile phone Xsmall image appears..etc.
I have tried some ruler and responsive view extensions; but it didnt help me.
How can I find exact dimensions?
The exact steps might depend on what browser you are using. Here are some instructions for Chrome (they will be similar for other browsers):
Resize the window to get the image in the smallest dimensions.
Right click the image and "Inspect Element"
You will see a tab for "Computed". This indicates the computed CSS attributes for this image. From this view, you can read the height and width in pixels.
Resize your window and repeat this for each of the image sizes.
A more advanced approach: depending on how they implemented responsive web design, you may be able to view the CSS the page is loading, and look for #media queries which control the size of the image depending on the viewport of the browser. Read more about #media here.

Responsive Design on a Samsung Galaxy S III Mini

I'm busy making an existing site responsive, currently I'm only making it responsive for one resolution so that my sales manager can "sell" the idea of a responsive site to the client. I've run into a problem, I've been assigned the screen size of 480px by 800px, the screen size of a Samsung Galaxy S III Mini.
When testing the responsive design on my computer using responsive design view in firefox or various other online tools, it works fine. However, when I test it on my phone, it displays the correct responsive design but it does not fill the width of the screen. In other words, the screen width is 480 pixels, but nothing on the page actually fills that 480px it only covers about half the screen width and leaves white space on the right.
This is the media query that I'm using:
#media only screen and (max-width : 480px),
only screen and (max-device-width : 480px){
Does this have something to do with pixel density or what is causing this problem?
Thanks in advance
Kind Regards
Willem
<meta name="viewport">
Have you looked into this tag? This changes the way the layout is zoomed/scaled on mobile browsers. You can look at what I found here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag . This example shows the problem you seem to be having. The "viewport" tag works in all mobile browsers, as far as I know, but you should check different browsers on the phone if this doesn't help you.
I had the same right-side white problem when all widths were working correctly, and solved it by turning off overflow in CSS as follows... This might hide actual content so you will have to test per your situation/layout...
html { overflow-x: hidden; }

Strange behaviour for IOS 6 rotation

I have search the net and in the forum for two weeks. I couldn't find anything like my problem.
I have an app build on the IOS 3 and in time I made it compatible with all IOS versions.
All the app is in portrait mode and I only have one screen (a chart) which is in landscape mode. Until IOS 5 and IOS 5 also I get the beautiful rect with black edges when rotating.
On IOS 6 I see that after I rotate I get the chart Nib is being presented from the top right corner. (I can't post an image or a video to demonstrate it as it has a logo and I'm not sure it's allowed.
I am using setRootViewController at the beginning.
I attached a sketch to demonstrate.
How can I retrieve the right animation?

How do I keep text from zooming in while turning iPhone from portrait to landscape in a web app?

I am creating my first responsive site, I am having trouble because when the iPhone is in portrait orientation, the text looks fine, but while turning to landscape, the text, images, etc all zoom in and get bigger to fit the screen. The font-size is in pixels so shouldn't it stay the same? How do I make it so it stays the same size and just adjusts the text wrap? An example of what Im trying to achieve would be this site on an iPhone. Thanks.
This sounds like the iOS orientation bug. There's a lot of incorrect advice out there to set a maximum scale in the viewport meta tag which seems to fix it but actually introduces a number of other issues. You might want to look at the workround to see if this does what you need.

Resources