Question

我有两个按钮，我想在页面加载时动态缩放以适应移动网站上的标题。多数民众赞成直截了当。

var btn_h = $('#menu_btn').height();
    $('#menu_btn').width(btn_h+'px');
    $('#search_btn').width(btn_h+'px');

这里的问题是当用户/我更改我的测试设备的方向时，内容被缩放仍然设置为前一个方向的宽度/高度。

function setHeader(){
    var btn_h = $('#menu_btn').height();
    $('#menu_btn').width(btn_h+'px');
    $('#search_btn').width(btn_h+'px');
    alert('height:'+btn_h+'  width:' + $('#menu_btn').height());
}
$(document).ready(function(e) {
    setHeader();
    $(window).bind('orientationchange', function() {
        setHeader();
    });
});

我在那里留了一点警报来帮忙。当设备为纵向时，当以横向刷新页面时，宽度和高度为42px，高度和宽度为27px。问题是，当设备方向改变时，内容未调整大小，大小保持与先前大小相同。这是因为该功能在设备完成旋转之前正在运行，如果有，是否有一种方法可以在方向更改完成后运行该功能以重新缩放按钮？

Answer 1

它尚未得到完全支持，但未来的解决方案绝对是window.orientation对象的用法。例如：

var orientation = screen.mozOrientation;

if (orientation === "landscape-primary") {
  console.log("That looks good.");
} else if (orientation === "landscape-secondary") {
  console.log("Mmmh... the screen is upside down!");
} else if (orientation === "portrait-secondary") {
  console.log("Mmmh... you should rotate your device");
}

请参阅https://developer.mozilla.org/en-US/docs/Web/API/Screen.orientation（我举了我的例子）以获取更多信息。

通过放置

，可以简单地找到它之前或之后是否被调用

setHeader(); setInterval(setHeader,5000);

在绑定内部 - 它将使用实际值每5秒显示一次警报。因此，只需关闭警报，直到页面旋转 - 然后检查实际值。

编辑：如果长时间负载将是您的问题解决方案将是长期间隔

var timer = 1000; 
function rotCheck(){ 
   /*check*/ 
   timer=timer+1000;
   setTimeout(rotCheck,timer); 
};
rotCheck();

会在1秒后触发，然后在2s，3s，4s，5s之后触发...... 近似地......

在设备更改方向上使用jquery动态调整内容大小

1 个答案: