React to CSS Media Queries using Client-Side JavaScript

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:scriptBlock id="scriptBlock1" defer="true"
    	type="text/javascript">
    	<xp:this.value>
    		<![CDATA[
                function mediaQueryListener1(mediaQuery){
                    var computedField1 = XSP.getElementById("#{id:computedField1}");
                    if(null != computedField1){
                        if(mediaQuery.matches){
                            computedField1.innerHTML = "In Portrait Mode: " + mediaQuery.media;
                        }else{
                            computedField1.innerHTML = "Not in Portrait Mode.";
                        }
                    }
                }
                function mediaQueryListener2(mediaQuery){
                    var computedField2 = XSP.getElementById("#{id:computedField2}");
                    if(null != computedField2){
                        if(mediaQuery.matches){
                            computedField2.innerHTML = "In Landscape Mode: " + mediaQuery.media;
                        }else{
                            computedField2.innerHTML = "Not in Landscape Mode";
                        }
                    }
                }
                XSP.addOnLoad(
                    function(){
                        var mediaQuery1 = window.matchMedia("screen and (orientation: portrait)");
                        var mediaQuery2 = window.matchMedia("screen and (orientation: landscape)");
                        mediaQuery1.addListener(mediaQueryListener1);
                        mediaQuery2.addListener(mediaQueryListener2);
                        mediaQueryListener1(mediaQuery1);
                        mediaQueryListener2(mediaQuery2);
                    }
                );
          ]]>
    	</xp:this.value>
    </xp:scriptBlock>
    <xp:text id="computedField1"></xp:text>
    <xp:br></xp:br>
    <xp:br></xp:br>
    <xp:text id="computedField2"></xp:text>
</xp:view>