HTML and CSS Reference
In-Depth Information
Listing 8-6. Double Pixel Density in CSS Example
<style>
.adContainer {
background-image: url(bg_600x500.jpg);
width: 300px;
height: 250px;
}
</style>
As you can see, the code example doubled the background image's size to make up for the extra device
pixels. This can get very confusing, I know! However, there are specifications being developed and even specific
vendor-prefixed features you can use today. For more information, read up on the Image-Set property in CSS
( http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images ) and the highly
anticipated and emerging Picture element spec ( http://github.com/scottjehl/picturefill ).
Mobile Tips
Now that you're all set with viewport and CSS, let's discuss some important “gotchas” around working with various
mobile devices. The following sections will be geared to help you deal with some common pit falls of mobile ad
development. Oftentimes clients will request that the devices' gray outline be removed. This outline looks like a gray click
region on mobile Safari and an amber or green region on Android devices. See Figure 8-4 for an illustration of the issue.
Figure 8-4. The touch outline on certain mobile devices
If you're looking to get rid of this outline, here's some code that demonstrates how to do just that using CSS.
 
Search WWH ::




Custom Search