HTML and CSS Reference
In-Depth Information
If you refresh your page on a touch-capable browser, you can touch and drag the
element
all around the browser
using your finger. Wherever your finger goes, the element follows. This could be a great method for achieving a drag-
and-drop type of effect on touch-enabled browsers.
If you use touch a lot—and I hope you do when developing for mobile—a really good JavaScript framework,
called HammerJS (
http://eightmedia.github.com/hammer.js
), can speed up your development. This framework
allows you to rapidly develop with touch in mind and only costs around 2 kilobytes when compressed, which is
enough to use freely within a mobile ad unit.
Not
■
When applying Css3 transforms on input fields in touch-enabled browsers, some android devices have lost
focus on input. it's best not to apply Css transforms until such issues are fixed in future versions.
Orientation
Orientation is another interesting feature of mobile devices (most of them have these sensors). Orientation simply
refers to how the user physically holds the actual phone or tablet. In either portrait or landscape mode, you can use
the orientation API to detect the screens layout and react accordingly. This is important to note, as you'll more than
likely need to develop two variations of your ads for both versions or use a “safe area” that can fit comfortably within
both. Sometimes publishers will request delivery of two separate ad tags, but that will hopefully phase out soon, as
another HTTP call shouldn't be made for a device-level feature. Ideally, a responsive ad layout, which can adapt to
the device's screen, should be the goal. The typical case uses JavaScript and CSS to rework the creative to the new
dimensions and adjust the creative layout accordingly. Listing 8-13 can be used to detect orientation within your
creative.
Listing 8-13.
Orientation Example (HTML)
<html>
<head>
<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait.css"><link
rel="stylesheet" media="screen and (orientation:landscape)" href="landscape.css">
</head>
<body>
</body>
</html>
From this code you can see that in the head of the document there are two style sheet references—one to handle
portrait layout and the other, landscape (notice the media query). This way, the ad creative can adjust its layout
accordingly, depending on the user's orientation. There is also a way to achieve this effect by using straight CSS
(see Listing 8-14).
Listing 8-14.
Orientation Example (CSS)
@media only screen and (orientation: landscape) {
/* rules for device in landscape orientation */
#ad {...};
}
@media only screen and (orientation: portrait) {
/* rules for device in portrait orientation */
#ad {...};
}
