While coding your responsive website you sometimes face unexpected problems.
For example the iphone automatically adjusts text elements to a “more readable” size. This results in different font sizes on your website in mobile view. To avoid this problem you can simply add a single line in your css.
html {
-webkit-text-size-adjust: none;
}
This disables the automatic size adjustment on the iphone. Another common problem are flexible images on your responsive website. Often the images are displayed with a wrong width-to-height ratio when the browser only refers to a percentage width. An easy workaround, without complex javascript image managing, can solve the problem with css.
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
Note that this solution is not saving any data transfer because the full resolution of the image is always downloaded.
More tips for coding with media queries can be found in that article on webdesignerwall.