iOS: Make divs not have a shadow on touch

Similar to a previous Android issue, except this time for iOS.  It’s not really a problem per-se, but it can make your UI look less clean.  What happens by default in mobile webkit is that when you hold your finger on an element, a grey transparent box is overlayed on it.  To remove this, use the following CSS property:

-webkit-tap-highlight-color:rgba(0,0,0,0);

What really matters is the last value in the 4 values, which sets the opacity to 0, in other words, makes it transparent.

OS X: Image Capture opens when you plug in your iPhone

Want to stop Image Capture from opening every time you plug your iPhone, iPod, or iPad in, and perhaps have iTunes open instead?  At some point in the recent past I must have accidentally set this option, but having not intentionally done so, I couldn’t recall how to set the default back to iTunes.

To disable Image Capture: With the device plugged in via USB, open Image Capture.  In the bottom left corner of the main application area, you should see the name if your iDevice and the text “Connecting this iPhone opens:” followed by a dropdown.  Click No Application.

To make iTunes open when you plug in your device: Open iTunes with your iPhone/iPad/iPod connected.  Select your device under Devices in the left column.  In the main window, scroll down to Options.  Check “Open iTunes when this iPhone is connected.

Conditionally Display High Resolution Images in HTML/CSS for Retina Displays

It’s really easy to do but I tend to forget how to do it since it’s only applicable to mobile projects:

Let’s say you have: 200px by 100px image.png and the same image twice as large (400px by 200px) called image_highrez.png.

First, we can’t just use a plain ol’ <img> tag. We have to use the commonly done trick of creating a div with the same height/width as the image, then setting the background to the image. Anyone who’s used CSS sprite sheets should be very familiar with this process.

HTML:

<div id="our-image"></div>

CSS:

div#our-image {
  background-image: url(image.png);
  height: 100px;
  width: 200px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  div#our-image {
    background-image: url(image_highrez.png);
    background-size: 200px 100px;
    -webkit-background-size: 200px 100px;
  }
}

Easy!

HTML5 Video works everywhere except the iPad / iPhone / iOS devices.

Problem:

HTML5 Video works everywhere except the iPad / iPhone / iOS devices.

Solution:

Double check to make sure your video is H.264 encoded. Most other browsers will play other formats, even Safari on OS X via the Quicktime plugin. There are exceptions (notably browsers that require Vorbis), however, most mobile devices at this time require that specific codec.