Mobile Buzzwords Logical (CSS) Vs Physical CSS pixel Vs Pixel Density Width Vs Device-Width Media Query- 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
Device Width and Screen Orientation- 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.
Do not lie View Port meta tag fix for Mobile- 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/What is IPhone Text Rotate Problem- 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 HTML and HTML 5Inline vs Block Element - 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/
CSS Fundamentalspx Vs em Vs % http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/ em vs rem 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/ CSS Clear Fix Hacks - http://www.thomasrudy.com/the-css-clearfix-hack-explained/
- http://css-tricks.com/snippets/css/clear-fix/
Media Query Support for Older Browsers - 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/
CSS Box Model Problem Normalize.css and Reset CSS?- 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 Prefix or Vendor prefixes- 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 |