Question

我正在所有浏览器上测试我的网络应用程序。

在Android上它运行良好，但在iOS上似乎jquery无法正常工作。如果设备处于纵向或横向模式，我需要更改<canvas>的高度和宽度，但在iOS上我需要刷新页面才能使其正常工作。

这个问题很奇怪。如果我将iOS设备更改为横向或纵向，则会显示正确的警报，但<canvas>的尺寸不会更改。

这是我的代码：

<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>

感谢！

Answer 1

使用媒体查询css可以轻松完成所有这些样式。为什么用jquery做这个？响应式CSS比使用jquery维护它要容易得多。

阅读更多@ http://www.w3schools.com/css/css_rwd_mediaqueries.asp以及网上提供的数百万篇教程。

jquery在iOS设备上无法正常运行

1 个答案: