jquery don't work properly on iOS device

Question

I'm testing my web application on all browsers.

On Android it works perfectly, but on iOS seems jquery not work properly. I need the height and the width of my <canvas> change if the device is in portrait or landscape mode, but on iOS i need refresh the page for make it work.

This problem is very strange. If i change the iOS device to landscape or portrait, it show the correct alert but the size of my <canvas> don't change.

This is my code:

<style type="text/css">
  .wrapper {
  position: relative;
  width: 280px;
  height: 420px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.signature-pad {
  position: absolute;
  left: 0;
  top: 0;
  width: 280px;
  height: 420px;
}
</style>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    if ( window.matchMedia("(orientation: landscape)").matches ) {  
        $(".wrapper").attr("width", '500');
        $('.wrapper').css('width','500px');
        $(".signature-pad").attr("width", '500');
        $('.signature-pad').css('width','500px');
        $(".wrapper").attr("height", '210');
        $('.wrapper').css('height','210px');
        $(".signature-pad").attr("height", '210');
        $('.signature-pad').css('height','210px');
    }else{
        $(".wrapper").attr("width", '280');
        $('.wrapper').css('width','280px');
        $(".signature-pad").attr("width", '280');
        $('.signature-pad').css('width','280px');
        $(".wrapper").attr("height", '420');
        $('.wrapper').css('height','420px');
        $(".signature-pad").attr("height", '420');
        $('.signature-pad').css('height','420px');
    }

    $( window ).on( "orientationchange", function( event ) {
    if ( window.matchMedia("(orientation: landscape)").matches ) {  
        alert('LANDSCAPE!!!!');
        $(".wrapper").attr("width", '280');
        $('.wrapper').css('width','280px');
        $(".signature-pad").attr("width", '280');
        $('.signature-pad').css('width','280px');
        $(".wrapper").attr("height", '420');
        $('.wrapper').css('height','420px');
        $(".signature-pad").attr("height", '420');
        $('.signature-pad').css('height','420px');
    }else{
        alert('PORTRAIT!!!!');
        $(".wrapper").attr("width", '500');
        $('.wrapper').css('width','500px');
        $(".signature-pad").attr("width", '500');
        $('.signature-pad').css('width','500px');
        $(".wrapper").attr("height", '210');
        $('.wrapper').css('height','210px');
        $(".signature-pad").attr("height", '210');
        $('.signature-pad').css('height','210px');
    }
    });

    var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
        backgroundColor: 'rgba(255, 255, 255, 0)',
        penColor: 'rgb(0, 0, 0)'
    });

    var cancelButton = document.getElementById('clear');
    cancelButton.addEventListener('click', function (event) {
        signaturePad.clear();
    });
});
</script>

<div class="wrapper" id="wrapper">
      <canvas id="signature-pad" class="signature-pad" width="280" height="420"></canvas>
</div>

Thank!

Answer 1

All these styling can be done easily with media query css. Why do you do this with jquery? Responsive CSS is so much easier than maintaining it with jquery.

Read more @ http://www.w3schools.com/css/css_rwd_mediaqueries.asp and many million tutorial available on the net.