When running the project via xCode, the reason there was no access to the device sensors on iOS from JavaScript became apparent from the logs:

ios ERROR: Plugin Compass not found, or is not a CDVPlugin. Check your plugin mapping in config.xml

Of course, the config.xml was just fine, but at least this gave me a lead. A search yielded a similar problem others had been having which was solved by deleting the ./plugins/ios.json file, removing the ./platforms/ios directory, re-adding the cordova ios platform for the project via cordova platform add ios and rebuilding the project.

After this, I could finally see the compass heading on my iPhone.

On ios 7 and higher, the status bar interferes with the top part of the html view of the cordova application. This can be resolved by

cordova plugin add org.apache.cordova.device

an then

    function onDeviceReady() {
        // a few examples that can be returned from device.platform are:
        //   - "Android"
        //   - "BlackBerry"
        //   - "iOS"
        //   - "WinCE"
        //   - "Tizen"
        if (device.platform == "iOS" && parseFloat(device.version) >= 7.0)
            document.body.style.marginTop = "20px";
        
        // your stuff goes here
    }