1

前奏曲（和夜曲）

我正在制作一个响应式网站。主要要求之一是网页在任何分辨率下都不应有水平滚动，直到 800 像素宽。此外，不应该在任何级别的缩放中滚动，直到 200%。我们可以看到的“最大”页面是 800 像素，缩放为 200%。

我正在使用 Mediaqueries 来容纳内容。媒体查询还检测缩放变化，因此，在 800px 和 200% 缩放的情况下，它会应用max-width: 400px规则。

为了使 Mediaqueries 在较旧的 IE 版本中工作（自 IE7 以来客户端需要），我使用的是Respond.js。它工作正常。

问题的新细节：

虽然 FF、CH 和其他不错的浏览器检测到缩放事件并正确应用媒体查询，但 IE（或 Respond.js）却没有。如果我在 IE 中放大 200%，则在我刷新页面之前，Mediaqueries 不适用。

在我的本地主机中，它工作正常（在缩放和调整大小事件中应用媒体查询。）

我已经调试了代码以打破这一行： 

//adjust on resize
    function callMedia(){
        applyMedia( true );   /* <---- THAT--- */
    }
    if( win.addEventListener ){
        win.addEventListener( "resize", callMedia, false );
    }
    else if( win.attachEvent ){
        win.attachEvent( "onresize", callMedia );
    }

在 localhost中，即使我缩放（ctrl +“+”或 ctrl + 鼠标滚轮或“页面”菜单），它也会在我尝试调整窗口大小时停止。

在 server，不会在缩放时停止，只会在调整大小时停止。

为什么它不起作用？我没有后端编程方面的技能，我认为js代码没有问题（？）......看起来它在后面（我无法正确解释），但可能是什么？

已经尝试过：

  • 我们不能在缩放事件中强制自动刷新（客户端要求）。

  • 我已经尝试过 css3-mediaqueries.js，但我无法让它工作，（而且它对我的网页来说太重了）。

  • 我已经禁用了 Web Portal 中的所有其他 JS（认为可能有一些 JS 会打扰 Respond），但仍然没有结果。

任何帮助，将不胜感激。

4

0 回答 0