The Style

###Mobile helper class and media query We use CSS bubbling up for mobile first responsive design

/*
 * Media queries for responsive design 
 */


/* Styles for desktop and large screen ----------- */

/*styles for 800px and up!*/
@media only screen and (min-width: 800px) {
  /* Styles */
}/*/mediaquery*/


/* iPhone 4, Opera Mobile 11 and other high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  /* Styles */
}

###Cross-browser prevent text resize

body {
    -webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
}

###Prevent callout

.nocallout {-webkit-touch-callout: none;}

###HTML5 contenteditable attribute on mobile

textarea.contenteditable {-webkit-appearance: none;}

###S60 3.x and 5.0 devices which animated gif fix

.displaynone{position: absolute; left: -100%;}

###Text overflow with ellipsis

.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

###Tip (only if you care about older IEs) - Normalize em-size for BlackBerry OS6 (issue #85) All browsers in the universe (that I know of) use a default em-size of 16px. The only exception to this rule is BlackBerry OS6 which uses different default font-sizes on different devices (22px and even 17px). This causes serious layout issues in em-based layouts on these devices. The way to solve this is to put the following code into the stylesheet:

:root {
  font-size: 16px;
}

This will normalize the base font-size for all current and future browsers. It does remove the ability to adjust the font-size in the browser in IE9 though so you might want to put the code in a somewhat restricting mediaquery:

@media all and (max-width: 480px) {
    :root {
        font-size: 16px;
    }
}