just a questition related to Apple IOS6/IPad 2/IPad Mini and an iScroll 4.2.5 within a Childbrowser which is opened through an App build in Adobe Phonegap 2.3.0:
Horizontal Scroller with Images, scaled to 100% of the device height (width is dynamic):
<div id="iscroller">
<table><tr>
<td><img src="image1.jpg" /></td>
<td><img src="image2.jpg" /></td>
...
</tr></table>
</div>
one Image has a width of 1125px with some borders and spaces around the iscroller with 80 pages goes up to the estimated width of 111966
The iscroll works perfect for horizontal scrolling. But if there are more than 80 Images within the scroller, IPad 2 stopps displaying Images after the 42th Image, the IPad Mini stopps displaying after the 70th Image. It seems that the last Image is "cutted" of from top to bottom or the page's end has reached for the Images but not for the scroller.
It seems that there is a maximum width, but what now?
tnx
A solution would be to only show the number of allowed images and then refresh the iscroll with the next amount of allowable images.
Related
After I've added some launch images to support iPhone X, the label text diplay smaller. How can I fix this problem? Thank you!
Before:
After:
That's neither bad nor unexpected. Without any launch image, the app runs as if this were a much smaller device, e.g. with a screen size of 320 x 480. That is narrower than the iPhone X so it is enlarged (zoomed) to the width of the device screen (so that we letterbox from the top and bottom, but not from the sides, as your first screenshot shows).
With the launch image, that letterboxing and enlargement goes away and you run natively with a screen size of 375 x 812. Now we are seeing more points of width on the same size screen, so the same point size font appears smaller, like a house seen from further away in a wider field of view.
You can easily confirm this by logging UIScreen.main.bounds with and without the launch image.
I have a question about using images for universal apps on IOS.
I've created a universal app that works on all iphone devices and ipads. I've placed all the content via storyboard. On a View I have two buttons one on the top space area that is 40 points high and as wide as the view, one on the bottom area also 40 points high and as wide as the view and an image that is a square (A x A) in the middle of the view, the image is constrained by horizontal and vertical (For it to stay always aligned in the middle of the view).
(I understand that if I use an image that is 100 points by 100 points image at 1x, I need to create two other images at 200 points by 200 points for 2x and 300 by 300 for 3x.)
1) So if I constrain the UIImage container by height and width equal to 100 by 100, it will be 100 by 100 points in all devices. But I want it to use as much space as possible. That would mean that on iphone 5 - 6s+ it would always be 100 by 100, it would look smaller on every growing screen. It would also mean that I would need to make it bigger for Ipad (Storyboard changing to regular regular to change UIImage container size for ipad, ex. increase it to 300 x 300). Put once I make it bigger, the image I have will be to small for that size therefore turn blurry or pixelated.
Right?
2) If I would like to be able to use as much space as possible I thought of using the following method. Constraining the UIImage to be equal width as the view but reducing its multiplier to 0.9 or 0.8 (Therefore making it smaller then the view width) and placing an aspect ratio of 1:1(To maintain it square). That way taking advantage of most of the view space that is free, and In all the devices it would always seem filling the same space. However the problem would be that the image would have to be different sizes. (Ex. iphone 5 = 150 x 150, on iphone 6 = 250 x 250, on iphone 6+ = 320 x 320 ans on ipad 600 x 600).
so If I make an image that in 2x that is 150 x 150, when its used on the iphone 6 it would be distorted or pixelated and the same for for the rest.
So can someone help me understand what I should do? or link a tutorial?
Please help!!
I've found that the best way to solve this problem would be to make a much larger image and let the constraints resize it. That way, you've covered your bases if new resolutions are developed, or with the current varying sizes. A much larger image would not look bad if it was compressed into a smaller space, but you might lose some details.
Let's say I have a few UIButtons that I created initially for the iPhone 5, and now i want to scale them correctly to work with iPhone 6 and 6 plus.
http://oi60.tinypic.com/2poec5j.jpg
How would I go about using autolayout to properly scale and fill the width of say an iPhone 6 and 6 Plus with the button? (Using Sign Up with Facebook in above image as example) I assume I have to make bigger versions of this image? I would rather not have the image get distorted in anyway. If so how much bigger would I have to make them? Thanks in advance.
You don't resize your buttons for iPhone 6. The design idea is that your UI primitives like buttons stay the same size. They use graphics assets that are higher resolution for the higher resolution displays (as explained by MinnesotaSteve) but the buttons and such should stay the same size.
You might make a table view display more rows, or make the rows wider so you can see more text, but buttons would say the same size (in points)
There's a pretty good tutorials here (1 YouTube, 1 web) on autolayout:
https://www.youtube.com/watch?v=IwSTXY0awng
http://mathewsanders.com/designing-adaptive-layouts-for-iphone-6-plus/
In regards to your image size, if you have a base size for a nonRetina, then you #2x for retina and #3x for the full iOS 7/iOS 8 designs. If already sizing for retina than make one for #1.5x. You can also have the #1.5x used for the smaller size if you just give 1 image.
I'm working on a project where I have two images, one scrolling underneath the other. The top image ("glasses") has fixed positioning and z-index=1. The other image ("quote") is left as is and is underneath the first. When I viewed the website in portrait mode on my iPhone, the fixed glasses image gets cut off, while the quote image scales down and fits within the screen dimensions. It works fine on desktop and in landscape orientation. I've tried setting the width of the glasses image to 100% and using media queries to target the phone width, but I havent had much success. The glasses just get squeezed and lose their normal shape. I'd really appreciate any answers or suggestions.
Link to live project
the problem is in mobile/tablet views in general, not just iOS.
Remove min width and height from image and add
.quote,
.glasses {
width: 100%;
}
OK, so I've been reading iphone 4's screen resolution is "640x960".
So I created a web page with an image sized 600x300 inside.
Now, when I access the web page, it just shows around half of the image and I have to scroll to the right to see it all. During my search I read that iphone 4's pixels count 2 for 1 CSS pixel blah blah.
Can someone clarify this for me? So iphone 4 cannot display an image sized less than 640 pixels wide "normally" ?
Yes, the 'correct' resolution is 320x480. The Retina display doubles the resolution, but adds the notion of 'points', so developers don't have to make two versions of same application.
Here you can read more about it.