I have created icons of 2 sized 40px X 40px and 80px X 80px for normal display and retina display respectively.
what is the proper way to use these 2 sizes of icons?
I mean should i change the dimensions of element for retina version to 80px X 80px or use background-size property to fit the large icons in 40px X 40px size?
You should follow the Safari Web Content Guide from Apple.
Specifying a Webpage icon
It depends on how you are using these 'icons'. Are they web app icons, images within the web page or background images?
Firstly retina images should be named with #x2.e.g.
Standard
sample.png
Retina
sample#x2.png
For web app icons see the previous answer from cpattersonv1
Background Images
This can be achieved with the use of media queries. A media query to target retina capable devices would look like this.
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
}
From within the media query you can then specify your retina image for the background-image.
I found that i need to keep the dimensions in CSS same for both normal and ratina versions, and fit the large image in normal dimension using background-size property.
Related
I am working on blog at blogger and it has got a responsive template. When I see logo on my blog on the computer it looks fine but when I go to iPhone it is kind of blurred and I don't know what is the reason for that.
I tried to edit logo and change it for different one but the result is the same...
Link to my blog is: www.5minLunchBox.blogspot.com
Does anyone have an idea how to fix it?
Thank you!
Your natural width is 220px width. But your mobile viewport width exceeds that amount to 320px to 480px depending on the mobile device. Not to mention, you are using a .jpg image which is highly pixelated.
SOLUTIONS
Familiarize yourself with .svg technology. Using an SVG will allow you to manipulate the image at all widths and make use of your max-width:100%;.
Use a larger image (no smaller than 480px) this way, you can still resize down without losing resolution, and not have a need to re-size up, which is your problem here. You are expanding .jpg pixels
Once you have added a larger logo, hopefully a .png at least, but preferably an .svg, do the following:
#media only screen and (-webkit-min-device-pixel-ratio: 1) {
.widget iframe, .widget img {
width:100%;
max-width: 320px;
}
}
This happens because the real logo jpg dimensions are: 200x90 pixels. On the desktop version set the width to 200px but the smartphone version set the width to 100%. For this, on an iPhone 6, the logo width become 375px and the image appears blurred and pixelated (on iPad become 768px).
You could augment the real size of the jpg logo, but the file size could be too big. If you can change the image format you could convert the logo to svg.
I often use a header with a full width background-image like this page http://thegreatdiscontent.com/adam-lisagor
What kind of media query -stack would you use for the background image?
I would like mobile devices to use images that are not too big in filesize, but also have retina devices have retina-images.
So maybe have something like a one big media query for retina macs, maybe one with really compressed image with retina size for the retina ipads. Maybe one for small mobile devices, retina and non-retina..?
It get's pretty complicated and of course I'd like not to have a list of 20 media queries to target different screen sizes with different resolutions and different (assumed) internet speeds.
Thoughts? What devices would you prioritice?
Thank you.
I think you misunderstand the point of CSS media queries. They won't change the file size being served. CSS is just client side script. If you want to serve images with a smaller file size for smaller screens or slower internet connections, you need to do that on server side.
Take a look at Adaptive Images to do that: http://adaptive-images.com/
Media queries only allow you to resize the original image, so it still loads the full size image, then resizes it.
The background-size property works nicely to keep a background image filling the available area. E.g.
#header {
background: url(image.png) no-repeat;
background-size: cover;
}
You can save the image at a large dimension but at a relatively low quality and it will look good on all devices, including retina screens, as explained here: http://blog.netvlies.nl/design-interactie/retina-revolution/
Considering how many screen sizes for Android, I am thinking should I put an image for toolbar and splash image or responsive background css image.
I am developing a mobile web-site.
CSS:
Good for multiple screens, so it can be responsive
Hard to develop especially if a Photoshop guy can do that within 10-15 mins :)
IMAGE
Hard to create a responsive image? Correct me if I'm wrong
Fast development.
If you want a responsive image, you could simply give the element a width of 100%. You might also need to add height:auto in order to preserve the aspect ratio of the image.
EXAMPLE HERE
img {
height:auto;
width:100%;
}
I am trying to develop a mobile version of my web application and I am having trouble getting it to look good on multiple browsers. I figure if I use some device capability detection I can dynamically generate widths and font-sizes based on a particular devices screen size. The problem is that it seems like a mobile browser doesn't treat 1px of CSS width equal to 1px of screen width. On an iPhone with a screen width of 320px, a body tag that is 320px wide takes up only about a 1/4th of the page. With no real frame of reference, it makes it hard for me to say "On a screen of 320px wide, make the font 16px" or something along those lines. Is there some general rule of thumb I can use to calculate the real browser width in CSS, or some calculation using multiple device capabilities that will help me generate dynamic CSS more effectively?
Thanks,
Mike
Try defining sizes and font weights in relative units. I would give % and em a go. Many mobile browsers try to scale everything down so that they render normal websites nicely. You may find you need specialy meta tags or the like to controll these browsers.
I have a website using a huge background image (2000x1500) in a div container (100% x 100%).
When I open that site on Safari on an iPad it gets scaled down (~40%) in a different proportion than the content (~80%).
I moved the background to an img-tag in a div with 100% width and 100% height and an overflow setting "hidden". Exactly the same happens.
Is there a CSS Setting that can help Safari to scale down background images in the same proportion as the content?
Adding this worked for me when I had a background image on the background canvas...
body{ -webkit-background-size: 2000px 1400px;}
Obviously one has to replace the dimensions with the correct size for the image.
You should definitely create a separate stylesheet for the iPad.
You can use the following to do so:
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />
On this link, you will find information about the orientation of your website on the iPad and how to deal with it.
My advice would be, to create a separate stylesheet (css file) for the iPad version of your site, no matter what you do, you should just create it and add a link tag like the one shown above.
If you have a background of a picture that is 2000x1500px for the iPad version, you can reduce it to fit the iPad, if that's the only thing you've got a problem with. I'd say you should reduce the size of the image to 1024px and declare it in the separate stylesheet for the iPad, and you will see the end result.
Let me know how it goes.
BTW you should read this article as well: http://www.inspiredm.com/2010/02/09/ipad-design/
It seems that this issue only occurs on the iPad when you have a background image that is attached the the <body> tag. If you place the background image into a containing div, the issue can be resolved -- this is a great work-around if you don't need to have your background image "fixed", as the techniques to make background fixed work in IE mandate that you use the <body> tag for images.
You can see the difference in these two sites, the first uses the <body> tag for positioning (due to the fixed positioning on the background image) and the second uses a containing div:
http://www.mricsi.com
http://www.collinshirsch.com
Hope that helps!
edit -- this is not entirely accurate -- it seems like this is the case only some of the time, and the reason behind why is unclear.
I've got a 5400x556 as a (scrolling) background image in a div. As a .jpg it gets scaled down drastically, as a .png it's fine. The only trouble now is the .png is 5 megs. Grr.
Good call on the separate stylesheets though.
good luck
owen
I use:
body {min-width:2000px; min-height:1500px }
You can use the solution of #UXdesigner to create a seperated stylesheet for iPad. But you can use a single statement in your current stylesheet:
#media only screen and (max-device-width: 1024px){
.yourClassname{
max-width: 500px;
}
}
and of course for smaller devices like phones you can use:
#media only screen and (max-device-width: 480px){
.yourClassname{
max-width: 100px;
}
}
Note that these suggestions only work in CSS3 (the latest devices all accept this)