This is my first post in this forum but I've been reading the CSS-Tricks posts for months. I'm in the middle of a website redesign and there are a couple of things I want to integrate while I'm still in the early stages. I have been using media queries for responsive web design but I don't know how to deal with font-sizes on high DPI screens like Retina. I have been doing some testing on my 4th gen iPod and the text is really small and hard to read. Is there a rule of thumb or guild lines any one can recommend for this issue? Thanks in advance.
There are media queries available to specifically target retina displays, but text really shouldn't be rendering smaller, that sounds like a problem with how you're setting font sizes.
It could also be that you aren't using the viewport meta tag, which would mean that your iPod is rendering the page zoomed out. See if putting this inside your <head> tag makes it better:
This is my first post in this forum but I've been reading the CSS-Tricks posts for months. I'm in the middle of a website redesign and there are a couple of things I want to integrate while I'm still in the early stages. I have been using media queries for responsive web design but I don't know how to deal with font-sizes on high DPI screens like Retina. I have been doing some testing on my 4th gen iPod and the text is really small and hard to read. Is there a rule of thumb or guild lines any one can recommend for this issue? Thanks in advance.
There are media queries available to specifically target retina displays, but text really shouldn't be rendering smaller, that sounds like a problem with how you're setting font sizes.
http://css-tricks.com/snippets/css/retina-display-media-query/
It could also be that you aren't using the viewport meta tag, which would mean that your iPod is rendering the page zoomed out. See if putting this inside your
<head>tag makes it better: