Media Query css e-mail

Question

This is my problem.

I'm coding a newsletter with tables. Working fine. I'm using media query's for the mobile styling. On my computer it works just fine when I scale down my browser. When scale my browser to 480px width, the content changes to the media query css.

When I open the mail on my browser on my phone (iPhone 5c) the content doesn't change to the media query's css! I tested it, and when I set media query max-width to 1000px it does change. But then the desktop version isn't any good anymore...

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

.nieuwsbrief {
    width: 80%;
    min-width: 0px;
}
}

This is the mailing so you can scale it for your self:

I think the problem is that modern phones have a high resolution. So I used max-device-width instead of max-width, but this didn't work either.

Hope you guys can help!!

(sorry for bad English, I'm Dutch).

Answer 1

Fixed it myself:

I changed max-width to max-device-width. It does the trick for mobile, but not when you scale down your browser. But I can live with that.

Thanks for all your help!!