It appears to me that on a iPhone Retina display that the media query is using the # of pixels without accounting for the double density of the display resulting in text fonts that do not reduced down in size proportionally to where they need to go.
Is this observation correct?
And if so do you have an updated media query for retina devices that can be put into the child css styles file?
Looks to me like iPhone Retina has two issues which work better
1) Use default btn for class = “btn” btn-lrg quickly runs out of room on a Retina device.
2) Also seems that staying with the default Main Content Area Text Size of 0.813em works best for iPhone Retina displays, I want to use either 0.938em or 1.00em and that seem to make the text too big on the iPhone Retina – not on other phones of the same size with normal displays including earlier iPhones.
Do you use 0.813em for the Circumference demo?
For now I am going to reduce the font size for blog.StopJetLag.com – (Will hold as is until noon PDT)
Yes to the 0.813erm font size.
As for the other….this is where things start to get tricky if you want bigger font sizing but not for the iphone (or other mobile devices) because you will have to modify the media queries to change the font sizing when being viewed in an iphone. So basically you would increase your font size for desktops etc to your .938 or 1em (which is 16px), and then edit the media query for phone display to go back to the smaller (or whatever size you want).
Automatic font sizing based on devices would be great, but to achieve that, requires jquery scripting, so the next best thing is to do it via css and media queries.