Adding device-dependent controls

In the next example, called ch08_controls, we create some roles for the different devices identified by OpenLayers 3. Firstly, we add some CSS rules for our new text-based control:

@media only screen and (orientation: portrait) {
    […]
    .ol-geoloc {
        bottom: 0;
        right: .5em;
        white-space: pre-wrap;
    }
}
@media only screen and (orientation: landscape) {
    […]
    .ol-geoloc {
        top: 0;
        right: .5em;
    }
}

As we will place our control in a pre element for correct line break detection, we need to wrap it in portrait mode. Otherwise, the end of the lines would be off the screen. We also change the position of this control based on the orientation of the device. Next, we change our Geolocation object a little bit to request high accuracy data on a regular basis:

var geoloc = new ol.Geolocation({
    projection: map.getView().getProjection(),
    tracking: true,
    trackingOptions: {
        enableHighAccuracy: true,...