jquery - Jquery在响应式模板中调整图像大小不适用于Iphone

Question

在响应式模板中，我有一些 jquery 代码来计算与屏幕尺寸成比例的图像高度。它适用于所有浏览器，但在 Iphone/Ipad 上，当我从纵向更改为横向时，图像不会调整大小，这是代码，希望有人能帮助我！谢谢

// 调整正文大小 $(document).ready(function() { var bodywidth = $(document).width(); var ratioheight = (bodywidth/3.582); $("#gallery").height(ratioheight) ; });

// 用于调整主体大小 $(window).resize(function() { var bodywidth = $(document).width(); var ratioheight = (bodywidth/3.582); $("#gallery").height(ratioheight ); });

Answer 1

你在使用 jQuery 手机吗？如果是这样，则有一个检测方向变化的事件称为orientationchange

或者取自检测视口方向，如果方向是纵向显示警告消息，建议用户使用说明

window.addEventListener("orientationchange", function() {
  // Announce the new orientation number
  alert(window.orientation);
}, false);

实际上，您的代码应该是这样的

$(window).bind('orientationchange resize', function(event){
      if(event.orientation) {
            if(event.orientation == 'portrait') {
          // do something
              } else if (event.orientation == 'landscape') {
                       // do something else 
                       } 
            } else {
                  // optional... PC-version javascript for example
                  }

      });