2D Transforms and Transitions - Beginning CSS3 - page 442

When you mouse away from the image, it returns to its reduced size. The change in size in both directions is
instantaneous, which can be rather jarring. However, as you'll learn later in this chapter, you can scale the image
smoothly over a specified duration using a CSS transition.

■ Tapping the image on a touch screen scales it up in the same way as hovering over it. However, it
doesn't return to its smaller size until you tap another element that uses the :hover pseudo-class. As figure 20-12
shows, the example in scale_3.html obscures the text. When scaling elements, make sure they're in a position
where they won't obscure important content. Alternatively, use the solution in the following section to disable scaling
on touch screens.

Caution

Preventing Elements from Being Scaled on Touch Screens
The simple way to prevent elements from being scaled on touch screens is to test for the JavaScript ontouchstart
event. If the event exists, you know that the page has been loaded into a touch-screen device. You can then use
JavaScript to add an extra class name to the images and create a style rule that prevents them from being scaled.
This extra style rule has been added in scale_4.html:

.noscale.scaleimg:hover {
transform: scale(1);
}

This sets the scale of elements with both the noscale and scaleimg classes to 1 when hovered over. In other
words, the element remains unscaled.
Alternatively, if no other transform functions are being used, you could set the value to none :

.noscale.scaleimg:hover {
transform: none;
}

At the foot of the page is the following script block:

<script>
if ('ontouchstart' in window) {
function noScale(scale, noscale) {
var images = document.getElementsByClassName(scale);
for (var i = 0, len = images.length; i < len; i++) {
images[i].className = scale+' '+noscale;
}
}
noScale('scaleimg', 'noscale');

}
</script>

The script begins by checking whether the ontouchstart event exists. If it doesn't, the rest of the script
is ignored. It then defines a function called noScale() , which takes two arguments. The first is the class name
assigned to elements that are being scaled. The second is the class name you want to add to prevent scaling on
touch screens. The last line of the script executes the function by passing the two class names to it.
If you want to use different class names, just change the arguments passed to the noScale() function.