I'm totally new when it comes to xcode, but there occured a problem:
I'm designing an iPad-App(Retina Display) in html/css with the standard retina resolution of 2048x1536px...the problem is, that when I open the app on the pad, the page turns out to be way too huge. If I'm reading out the UiWebView-Resolution I get 1024x768...am I able to change this to get the real iPad dimension?
thx for your help!
Best regards,
daft
Dimension values on iOS are described in points. Each point can have different number of pixels - depends on screen's pixel density. UIWebView interprets html document size value as point - so 1 html pixel means 1 point.
I suggest you two options to cope with that:
1. Design you're web app to resolution 1024x768 and insert images which are scaled to 50% size to have more pixel density.
2. Leave page in 2048x1536 resolution and use UIWebView api to scale content.
Related
Just a straight forward question. I´m trying to make the best possible choice here and there is too much information for a "semi-beginner" like me.
Well, at this point, I´m trying with screen size values for my layout (activity_main.xml (normal, large, small)) and with different densities (xhdpi, xxhdpi, mhdpi) and, if a can say so myself, it is a mess. Do I have to create every possible option to support all screen sizes and densities? Or am I doing something really wrong here? what is the best approach for this?
My layouts are now activity_main(normal_land_xxhdpi) and I have serious doubts about it.
I´m using last version of android studio of course. My app is a single activity with buttons, textview and others. Does not have any fragments or intents whatsoever, and for that reason I think this has to be an easy task, but not for me.
Hope you guys can help. I don't think i need to put any code here, but if needed, i can add it.
If you want to make a responsive UI for every device you need to learn about some things first:
-Difference between PX, DP:
https://developer.android.com/training/multiscreen/screendensities
Here you can understand that dp is a standard measure which android uses to calculate how much pixels, lets say a line, should have to keep the proportions between different screensizes with different densities.
-Resolution, Density and Ratio:
The resolution is how much pixels a screen has over height and width. This pixels can be smaller or bigger, so for instance, if you have a screen A with 10x10 px whose pixels are two times smaller than other screen B with 10 x 10 pixels too, A is two times smaller than B even when both have 10 x 10 px.
For that reason exists the meaning Density, which is how much pixels your screen has for every inch, so you can measure the quality of a screen where most pixels per inch (ppi) is better.
Ratio tells you how much pixels are for height as well as width, for example the ratio of a screen of 1000 x 2000 px is 1:2, a full hd screen of 1920 x 1080 is 16:9 (16 pixels height for every 9 pixels width). A 1:1 ratio is a square screen.
-Standard device's resolutions
You can find the most common measurements on...
https://material.io/resources/devices/
When making a UI, you use the DP measurements. You will realize that even when resolution between screens are different, the DP is the same cause they have different densities.
Now, the right way is going with constraint layout using dp measures to put your views on screen, with correct constraints the content will adapt to other screen sizes
Anyway, you will need to make additional XML for some cases:
-Different orientation
-Different ratio
-Different DP resolution (not px)
For every activity, you need to provide a portrait and landscape design. If other device has different ratio, maybe you will need to adjust the height or width due to the proportions of the screens aren't the same. Finally, even if the ratio is the same, the DP resolution could be different, maybe you designed an activity for a 640x360dp and other device has 853x480dp, which means you will have more vertical space.
You can read more here:
https://developer.android.com/training/multiscreen/screensizes
And learn how to use constraintLayout correctly:
https://developer.android.com/training/constraint-layout?hl=es-419
Note:
Maybe it seems to be so much work for every activity, but you make the first design and then you just need to copy the design to other xml with some qualifiers and change the dp values to adjust the views as you wants (without making from scratch) which is really faster.
Has anyone successfully used an IKImageBrowserView with a Retina Mac? What I get is that the image size is wildly misinterpreted. Previously I was using CGImage images which don't have a logical size, so it makes sense that the browser can't draw the at the right size. However, I've switched to NSImage, created using -initWithCGImage:size: and that still doesn't work right.
My images are 244x184 pixels and should be drawn at a logical size of 122x92. When passing 122x92 as the size, they are drawn way too large, at about 180 pixels wide. If I pass exactly half this, 61x46, the size is correct, but the image looks downscaled and not sharp. If I pass 122x92 and run with NSHighResolutionCapable set to NO in Info.plist, everything works well.
My conclusion is that IKImageBrowserView is not Retina compatible even with the 10.10 SDK on a Retina MacBook Pro running OS X 10.11. Or am I missing something? Any pointers would be appreciated!
I discovered that I wasn't really thinking the right way. The browser is supposed to always scale its images, so that's why the Retina-sized images ended up larger. I just subclassed the browser to be able to use a custom cell and customize the image frame per cell. There are however some subtle bugs in the browser that cause it to scale the images just a little bit in Retina mode, but I was able to work around that by creating a custom foreground layer for each cell that contains the image without scaling. Problem solved. Hopefully this will help someone else in the future.
We are working on a mobile application that requires a user to position a printed image on top of the touchscreen of his mobile device. The application should display a placeholder where the image has to be placed, with the correct size of the physical image, so we know exactly where it is in order to interact with it.
This works great on devices of which we know the exact screensize, but we want this to work on all mobile devices. Our developer who is working on this project appears to have problems to get the required information to do the calculations.
We are using Unity and it has to work on both iOS and Android. Can anyone give us some pointers on how to tackle this problem please?
Get the aspect ratio of the image by dividing the width by height.
Set a placeholder in the location it should be and give it a fixed constant height OR width.
If the height is fixed, multiply height by the aspect float to get the new width. If the width is fixed, divide the width by the aspect to get the new height.
hope this question is ok on stackoverflow. I want to use a photo as the background for the homepage of a website. The photo will be take up the entire page. However i don't know what resolution i should make the photo. I was thinking 1920 x 1200px so that people with 24 inch screen don't see the 'ends' of the photo. However is that big enough? I'm worried about the site looking ok on screens larger than 24 inches.
Also anyone know how i should optimize the photo so it loads as fast as possible? Thanks.
Overall, this seems to be a question of trade-offs. The better the resolution, the slower the page load for a do-nothing page. Is it worth the slow-down to have the better resolution and avoid pixellation?
Also, I think you're asking the wrong question, since a 24-inch screen can be in multiple resolutions.
I would approach this in the following manner:
what is the largest resolution you MUST have your photo look "good" on? Then make your photo that resolution. If 24" is your target, look at what resolutions this size monitor "typically" supports and target that.
What number of colors you want? (or perhaps b&w / grayscale). If you reduce the number of colors (preferably to "web-safe" colors), you can load faster with the same resolution.
A program like Photoshop (or Gimp) will probably give you the most power in tuning these parameters.
Do you care if only a portion of the photo displays when your viewer has a smaller window?
I know this isn't a cut and dried answer, but these things seldom are (IMHO).
For a solution that will work on most modern browsers, you will need to place the image in a div with a z-index less than the rest of your page (see: Stretch and scale CSS background)
As far as creating a 1920x1200 photo that will compress to a small size, I would recommend trying a smaller size (e.g. 960x600) and see if it looks okay on your 24-inch screen. There are many programs that will let you specify file size for your compression (e.g. FastStone Resizer) so you can experiment and see what is acceptable. In general, photos with less detail and/or color-depth will compress better.
Another problem you are going to run into is aspect ratio. Even assuming that your web-site is always opened in a full screen browser and not a window, sometimes that screen is going to be 16:9 ratio and sometimes 4:3. You could try to create an photo that has a nice 4:3 ratio "sweet-spot" in the center and adjust your div using some Javascript based on the current window aspect-ratio.
Is there a standard max for the width of the main content area of a web page? I want to maximize screen real estate without affecting usability. I've seen a lot of sites stick to 980px or less. Anyone have any suggestions?
Target either the 800x600 or 1024x768 resolution.
For 800x600 it is around 750px.
For 1024x768 it would be 970px.
I'm assuming you're referring to the wrapper width since you mentioned 980.
The most ideal solution is to not think of pixels at all and instead rely on ems/%s and scaling, be as fluid as possible so your design fits on small mobile devices and your elements heights are not fixed but auto. Example being: http://www.456bereastreet.com/
But if you're stuck with web designers who still think pixel and you know for sure you'll be unable to get them to try making images that are liquid/fluid, I would say shoot for 960 pixels in width so you have enough viewing area in a 1024x768 with scrollbars in IE6/XP, but this really depends on your audience and the majority of your audience's screen resolutions.
Research, such as that referenced here suggests that people have a more difficult time reading long lines of text. That's why I restrict my content width to 800px or so.
You have to first ask the question. Who is my audience?
There's no "standard", especially in this age of PDAs/smartphones/netbooks/smartbooks/kiosks/etc... - while it may sound cliche, the best thing is to design a fluid layout not depending on exact screen size.
The answer may change depending on your intended/anticipated user base, of course (e.g. assume 1024 px screen width leaving you with 980 working px - and consciously decide that you are not interested in supporting anyone with smaller screen resolution).
Another solution is to allow size layout customization by making it into portal-like with user having control of layout of the portlets (ala My Yahoo).
960 is a pretty common standard, and the rationale behind that figure is the fact that fitting on a 1024 pixel wide screen will allow a big majority of your users to see the content without scrolling. See here for one of 100's of sites that give access to browser & user system capabilities statistics for some initial inspiration.
But in the end, it'll up to you to understand the structure of your customer base - if your site targets iPhones, targetting 1024 pixel wide screens may not be your smartest decision.
Not sure about absolute pixel values, but one thing I'd make sure of is that the text columns don't get too wide. There is a number of characters beyond which reading comprehension is impaired.
1000 pixels in width, is what I use which fits into the minimum 1024x768 resolution used these days without a horizontal scroller at the bottom of your browser ....