1.Topics‎ > ‎Mobile Development‎ > ‎Responsive Web‎ > ‎

Key Concepts



Mobile Buzzwords 

Logical (CSS) Vs Physical CSS pixel Vs Pixel Density

  1. IPhone Introduced the concept of CSS pixel density that means number of physical pixel per CSS logical pixel
  2. For IPhone Retina Display it is 2:1 is one logical CSS pixel is equal to 2 physical pixel.
  3. http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
  4. http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html   

Width Vs Device-Width Media Query

  1. The device-width media query measures the width of the device in device pixels. 
  2. The width media query measures the total width of the page in CSS pixels.
  3. 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

  1. 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

  1. 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.
  2. This was originally added as feature so that desktop devices can be rendered on mobile screen in very zoomed in mode.
  3. 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

  1. By default In IPhone Text Size changes with orientation
  2. This causes a problem that same text looks different on different orientations 
  3. 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 

RGB VS RGBA

  1. RGBa is a way to declare a color in CSS that includes alpha transparency support. 
  2. http://css-tricks.com/rgba-browser-support/ 

Touch Target Area

  1. We can add padding or margin to increase sensitiveness of small areas like hyperlinks 
  2. Apple says 44x 44 px for ratina display
  3. Prefer padding way instead of margin

Intrinsic ratio

  1. it means fixed aspect ration for any element that is independent of view port.
  2. 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.
  3. http://alistapart.com/d/creating-intrinsic-ratios-for-video/example2.html

HTML and HTML 5

Inline vs Block Element 

  1. Block element can have absolute width and height and do not float with text while inline float with text 
  2. http://www.impressivewebs.com/difference-block-inline-css/

CSS Fundamentals

px 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 

  1. http://www.thomasrudy.com/the-css-clearfix-hack-explained/
  2. http://css-tricks.com/snippets/css/clear-fix/

Media Query Support for Older Browsers 

  1. http://www.htmlgoodies.com/html5/tutorials/three-ways-you-can-use-html5-on-your-website-today.html#fbid=7XMNKpWLVaT
  2. http://css-tricks.com/snippets/javascript/make-html5-elements-work-in-old-ie/

CSS Box Model Problem 

  1. When we ask of size different browser provide in different way. Some include padding and some not.
  2. This cause inconsistency across the different browsers.
  3. Fix for this problem is Box Model CSS Hacks
    1. https://www.addedbytes.com/articles/for-beginners/the-box-model-for-beginners/
    2. http://www.fix-css.com/cheat-sheets/browser-box-model-css-hacks/

Normalize.css and Reset CSS?

  1. http://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
  2. https://the-pastry-box-project.net/oli-studholme/2013-june-3

CSS Browser Prefix or Vendor prefixes

  1. CSS browser prefixes are a way for browser makers to add support for new CSS featuresin a sort of testing and experimentation period. 
  2. 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