Mobile Browsers

Wikipedia

History of Mobile Browsers

WAP

Desktop Browsers

• Safari
• Android Webkit
• Chrome
• Opera
• UC

iOS

Android

Zoom Text Reflow

Samsung

HTC

WAT?

Google Services

Chromium

• Samsung (S4+) - Chromium (Version 28)
• Amazon - Silk (Chromium) - (no Google Services)
• Nexus - Goolge Chrome (Google's Chromium)
• Motorola - Google Chrome
• HTC (4.2+) - Android Webkit

WAT?

We Officially Support

Latest Mobile Safari -1

Latest Mobile Chrome -1

Development Tools

iOS Simulator

Android Emulator

Safari Dev Tools

Edge Inspect CC

Charles

Remember Touch Events

• touchstart
• touchend
• touchmove

• mousedown
• mouseup or click
• mousemove

var canvas = document.querySelector('#canvas'),
    img = document.querySelector('#img');

    
function dragInit(){
  // save initial pointer/touch positions relative to photo
  document.addEventListener('mousemove', drag);
  document.addEventListener('touchmove', drag);
}

function drag(){
  // calculate pointer/touch point relative to intial pointer/touch points
}

function unBindDrag() {
  document.removeEventListener('mousemove', drag);
  document.removeEventListener('touchmove', drag);
}

img.addEventListener('load', function(){
  
  // Bind Events
  canvas.addEventListener('mousedown', dragInit);
  canvas.addEventListener('touchstart', dragInit);
  
  document.addEventListener('mouseup', unBindDrag);
  document.addEventListener('touchend', unBindDrag);
  
});

Avatar Example

Demo