Responsive: device pixel ratio problem

[samclauw]

Hi all, I’ve made a responsive e-mail template (600px wide). There’s one media query that change the block system when the browser width is smaller than 480px:

@media only screen and (max-width: 480px) {
…
}

For the iPod touch client (screen size smaller than 480px), the mobile version is taken and it fits my needs. However, on a Samsung Galaxy S III for example, it doesn’t show up as I wish. It takes the 600px layout and it results in a hard to read font size.

I’ve read some documentation and it’s all about the device pixel ratio. For the Samsung Galaxy S III, it’s “2”. Unfortunately, it’s hard to understand how I could change my media query so such devices does show the mobile version of my template.

Is there anyone who can assist me on this? Or someone who knows a site with a very good device pixel ratio explanation? Thx! ;)

[Mehul Golania]

HI,

you can simply use the width 100% for the particular elements.

[samclauw]

That’s how I did it already ;)
<td>’s got a width of 100% and a “display: block” as a style attribute. My problem is that devices with a device pixel ratio highter than 1 aren’t showing the 480px wide version of my e-mail template. They show the 600px version and everything is shrunked to fit the screen size. That results in very hard to read paragraphs :)

[MDMueller]

Do E-Mail-Clients support mediaQueries? AFAIK, the CSS-support from E-Mail-Clients is really horrible. i.e. Outlook doesn’t even support basic stuff like display, float, clear

A nice overview about supported Features: https://www.campaignmonitor.com/css/

Edit: I might be mistaken – you’re talking about an E-Mail-Template shown in webbrowser?

[samclauw]

The media queries are supported on most mobile devices an that’s why it’s (in my opinion) very important to use them when creating an email template. So in fact, I’m talking about an e-mail template shown on a mobile device (Samsung Galaxy S III for example) ;)

[Author]

Posts