IPhone Introduced the concept of CSS pixel density that means number of physical pixel per CSS logical pixel
For IPhone Retina Display it is 2:1 is one logical CSS pixel is equal to 2 physical pixel.
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
The device-width media query measures the width of the device in device pixels.
The width media query measures the total width of the page in CSS pixels.
In general from CSS point of view Width stand for CSS Pixel width of device i.e. resolution of device/ CSS Pixel Density
iPhone and iPad devices, the device-width always corresponds to the width of the device in portrait mode (ie: 768px), regardless of whether the device is in that mode or landscape instead. With other devices, its device-width changes depending on its orientation.
By default mobile devices report there physical width (based on resolution) as screen width that is usually higher in case of HDPI devices like IPhone Retina display.
This was originally added as feature so that desktop devices can be rendered on mobile screen in very zoomed in mode.
For responsive mobile websites we usually add a view port meta tag fix that forces devices to report view port size in terms of physical devices width and height not the logical that is usually resolution as default. EX <meta name="viewport" content="width=device-width, initial-scale=1">
ref http://css-tricks.com/snippets/html/responsive-meta-tag/
By default In IPhone Text Size changes with orientation
This causes a problem that same text looks different on different orientations
Fix for this problem is to apply text-size-adjust CSS property
References
https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
RGBa is a way to declare a color in CSS that includes alpha transparency support.
We can add padding or margin to increase sensitiveness of small areas like hyperlinks
Apple says 44x 44 px for ratina display
Prefer padding way instead of margin
it means fixed aspect ration for any element that is independent of view port.
This is usually needed to create a box with the proper ratio (4:3, 16:9, etc.), then make the video inside that box stretch to fit the dimensions of the box.
http://alistapart.com/d/creating-intrinsic-ratios-for-video/example2.html
Block element can have absolute width and height and do not float with text while inline float with text
http://www.impressivewebs.com/difference-block-inline-css/
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
While em is relative to the font-size of its direct or nearest parent, rem is only relative to the html (root) font-size.
http://css-tricks.com/rems-ems/
http://css-tricks.com/confused-rem-em/
http://www.thomasrudy.com/the-css-clearfix-hack-explained/
http://css-tricks.com/snippets/css/clear-fix/
http://www.htmlgoodies.com/html5/tutorials/three-ways-you-can-use-html5-on-your-website-today.html#fbid=7XMNKpWLVaT
http://css-tricks.com/snippets/javascript/make-html5-elements-work-in-old-ie/
When we ask of size different browser provide in different way. Some include padding and some not.
This cause inconsistency across the different browsers.
Fix for this problem is Box Model CSS Hacks
https://www.addedbytes.com/articles/for-beginners/the-box-model-for-beginners/
http://www.fix-css.com/cheat-sheets/browser-box-model-css-hacks/
http://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
https://the-pastry-box-project.net/oli-studholme/2013-june-3
CSS browser prefixes are a way for browser makers to add support for new CSS featuresin a sort of testing and experimentation period.
Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn’t been finalized.
References