Ok so I have been working with a designer who made the mockup of app in Photoshop. I am not using iPhone statusbar and using custom navigation bar which the designer made of 100px. In that navigation he put an icon of 48 pixels.
Now I have to transform into code and I am using UIWebView for the purpose. The layout he designed, I am going to make it in HTML/CSS that will be loaded in UIWebView.
Now the issue is, the PSD he made for the screen has SIZE of 640 x 960. In Iphone4 it's resolution rather than Physical Size. Base on setting of 640 x 960 pixel Image/PSD, he made the top bar of 100pixels. Now If I follow him that things getting messed up.
What I did that I just made everything half of size to accomodate 320 x 480 sceen size in CSS. I set Navigation Bar to 50px(for 320 x 480) and I put #2x.png image (48 x 48) in it.
Now when I load app in my mobile it appears big as it should which gives me impression that 48 pixels did not appear as 24px Image with High Density.
I am quite confused, If I make 100px navigation bar then everything looks big as I am targetting big size while I have to target high resolution. How do I adjust elements(DIV) and Images in my scenario?
Take a look at these articles on using CSS3 media queries and the viewport tag in order to help manage styles between normal and high definition displays:
Targeting the iPhone 4 Retina Display with CSS3 media queries
iPhone 4 and iOS 4 Safari Detection and Behavior
Related
I don't know if I'm misunderstanding something fundamental in how screen resolutions work, but I'm getting stuck on an issue with the Kindle Fire HD (7").
I have a responsively designed page that, as normal, uses CSS media queries to change the presentation of certain elements. This works as expected on all browsers and devices tested, except for when browsing with the Kindle Fire HD (7"). According to specs (http://en.wikipedia.org/wiki/Kindle_Fire_HD) it has a screen resolution of 1280 x 800 px. This is also verified when I check the device using WURFL's test tool at tools.scientiamobile.com.
So... I have breakpoint screen widths set for
'mobile' - 767px and below
'tablet' - 768 - 989 px
'desktop' - 990px and above
... so I'd expect the Kindle Fire to display my page in 'tablet' mode in portrait orientation, or 'desktop' mode in landscape. However instead it shows it in unexpectedly smaller breakpoints: 'mobile' mode in portrait, and 'tablet' mode in landscape.
On closer inspection, I'm not sure this is actually much to do with my webpage, or its CSS. When using this device, I also seem to be seeing 'smaller' breakpoint views of other RWD sites (e.g. in portrait mode, I get the 'tiny' breakpoint view of getbootstrap.com, which is aimed at 767px and below).
What's then strange is that, when detecting the screen size using JavaScript, I get 534 x 854px (and have also tested this again on other sites, like supportdetails.com, and got the same results).
I haven't found any similar issues reported re this device, so I'm wondering a) if anyone's encountered similar issues, or b) if I'm just misunderstanding something crucial with how screen resolutions are detected by different devices.
Thanks!
When doing media queries you need to take into account the CSS pixel ratio.
The value you need to use on the media query = (The Advertised number of pixels) / (CSS Pixel Ratio).
This wikipedia page is a good source of CSS pixel ratios to use for this:
http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
Good Luck
We have been provided with a Photoshop created specification for a website. It gives specific pixel-based panel widths and various font sizes for different items (in points).
For example, the text in a data grid is 12pt Verdana. The grid is 765px wide.
When rendered in a browser (Chrome or IE) at 100%, the grid is 765px as expected, but the font appears larger than the design (around 20-25% larger in the browser).
We suspected the DPI settings in Photoshop might be a cause, but if anything they should have had the opposite effect (Photoshop doc set to 72DPI, Windows/browsers rendering at 96DPI).
Any suggestions on what we are overlooking? Should the Photoshop file be authored at 96DPI?
Here is another discussion about pt vs px in photoshop and how you can change to px instead. Maybe it helps :)
https://stackoverflow.com/questions/3868627/photoshop-pt-size-conversion-to-web
Make sure your photoshop document is set to 72ppi, then it will match browser size
Under CS2 its a simple process of going into the Edit Menu -> Preferences Submenu -> Units and Rulers then change the units type to pixels.
Does anyone know if there is a workaround for this? Internet Explorer 10 and Window phone 8 are not able to correctly scale background SVG images when a user zooms. Looks like IE rasterizes the SVG on load.
Here is an example: The first image is the SVG as a background image. Zoom in on a MS Surface or Windows 8 phone and you'll see it blurs horribly.
The second image is the same SVG as an img tag. Zoom this on a Surface or Windows 8 mobile phone and it scales as you would expect (nice and clean).
Is there any property that can be added to make IE10 behave? Or is it merely a case of waiting for the folks at Redmond to fix it?
The problem is that IE, and other browsers such as Firefox rasterise the SVG before displaying it, so it will become blocky when zoomed.
The easiest way to fix this is to make the SVG file larger than is needed. For example double the size, or more if the user is likely to zoom in further. You can then resize the SVG image with CSS to display it at the correct size. This way the image will be naturally larger, so wont become blocky, unless you zoom in even further. At default zoom level the image is scaled down rather than up, which browsers usually handle better.
Edit: You can find further info on this issue under the “SVG and CSS Backgrounds” heading at http://dbushell.com/2012/03/11/svg-all-fun-and-games/
I think the phone uses the layout-hdpi file but this doesn't seem right, mostly because its dimensions(540 x 960) are not what I'm used to seeing(480 x 800) for layout-hdpi phones. So what is the actually layout file used? Also, if it is layout-hdpi phone how can I stretch an icon that has a width of 480 to 540? Would I programmatically have to test the phone's dimensions and then expand the drawable-hdpi file to fit the various device dimensions? I looked at this link but they never specified what layout file was used.
Yes, HTC Evo 3d use drawable-hdpi images. You should have to put the Layout file also. Put the same file into layout-hdpi.
Now create the Emulator of the Resolution 540 X 960. And test the App in it. There should be minor difference between normal hdpi and HTC Evo Screen resolution. Manualy test it.
I am getting same trouble before some days. What i have done is: I am going to check the resolution of the devide screen size at run time. And if the Resolution is compare to that HTC Evo 3d then it will set the height and Width of the All Images at run time that fit to the HTC Screen Resolution.
That was the Best Solution i found till today to Make app for HTC Evo 3d.
For Checking the Resolution at run-time you can use this:
Display display = getWindowManager().getDefaultDisplay();
DisplayMetrics dm = new DisplayMetrics();
display.getMetrics(dm);
int width = display.getWidth();
int height = display.getHeight();
if((height==960) && (width == 540)){
// Do change the Image Height or Width or position
}
Enjoy. :)
So I have two images set to fill the screen - one at 320x480 (iPhone 3) and the other at 640x960 (iPhone 4).
img.png (320x480)
img#2x.png (640x960)
In Interface Builder, I have img.png set to fill the view (it shouldn't be filling the iPhone 4 view, though, right?), and when I build and run, it is notably too small.
So, when I do the opposite, setting img#2x.png as the img, a giant blue question mark fills the view. The project still builds and the image fills the screen, but is very pixelated as if it has been rescaled. It shouldn't have been rescaled, though, as it is the higher resolution.
Now using...
img.png (640x960)
img#2x.png (320x480)
I've also tried switching which file takes the #2x suffix, but that has not helped either. With the smaller file taking the #2x suffix, and setting the image view to img.png, it shows up way larger than the view canvas, but way too small when on the phone. With the smaller file still having the #2x suffix, I tried switching the view to the new img#2x.png and once again got the oversized, pixelated question mark in IB and a low res full-screen image when deployed to the phone.
I also made sure that my view size was set to 640x960 in the size inspector. What else should I be doing?
Don't use #2x when specifying the image name. Just use the base name of the image (so in your case, just img). iOS will do the magic behind the scenes to use the 2x version if it's on a retina display and the regular version otherwise (including when you use a xib to lay out your interface).
The displayed dimensions of the image will always be the dimensions of the non-2x image. The retina display just displays 2 pixels for every 1 which is why the scale is 2.0 and you have to double the dimensions of the original image. So your view size in IB should be 320x480.
Edit
If IB is being finicky, especially in Xcode 4, just try deleting the xib and starting over. Sometimes it gets a bit corrupted and doesn't know what to do with itself. I've had to do this on one or two occasions, and it seems that it worked for the OP as well.