iPhone Retina and Font Size

[Bill Ashton]

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?

Thanks

[Sushil Adhikari]

when you say iphone retina display, you are referring to iphone 5?
Can you give me a link to a page that gives an example of what you are referring to, and I will take a look with my iphone.

[Bill Ashton]

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)

[Sushil Adhikari]

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.

[Bill Ashton]

For today I am going to go back to 0.813em.

Need to get an important blog post out and I want to get my Circumference tweaking to an acceptable level.

BTW: Do the .visible-xs, etc. classes work with this theme?

FYI: On https://www.styledthemes.com/circumference under View the Demo Site – here is a misspelling “Circumferencce” offers

Thanks for your help.

[Sushil Adhikari]

Thanks for the typo…that is what happens when it’s 2am in the morning…

.visible-xs will work yes (Bootstrap 3.x)

[Author]

Posts