0

我的网页中有这样的声明，它特别格式化了一个页面，这样他们就可以用一个小的上网本屏幕更好地查看它：

<link rel="stylesheet" media="only screen and (max-height: 750px)" href="netbook.css" />

我的问题是，我可以用 javascript 做同样的事情吗？

我有一组 jquery 函数，它们也会根据屏幕大小而变化。我正在寻找这样的东西，我想：

<link rel="javascript" media="only screen and (max-height: 750px)" href="scripts_netbook.css" />

有什么想法吗？

非常感谢一如既往，

担

4

3 回答 3

1

我会做的是这样的：

$(function() {
  var script_path = $(window).height() > 750 ? '/path/to/file.js' : '/path/to/otherfile.js';
  $.getScript(script_path, function() { $(window).trigger('script_loaded'); });
  $(window).on('script_loaded', function() {
   //run other code requiring those scripts here
  });
});

编辑：从您的评论来看，您似乎想要这样做：

$(function() {
  if ($(window).height() < 750;) {
      $('#footer_index').delay(800).transition({y:-155 }, 1000, 'snap');
  }
});

就调整大小而言，这不会像媒体查询那样起作用，而只是在页面加载时起作用。如果您希望它用于调整大小，您可以执行类似的操作

$(window).on('resize', function() { //do stuff });
于 2013-05-13T20:13:22.783 回答
1

根据链接类型参考，JavaScript不是链接类型，所以你的答案是否定的。

您可以根据需要简单地使用以下内容：

screen.onresize = function() {
    if (screen.height <= 750) {
        //Your scripts
    }
};


注意：根据媒体查询“高度”规范，

“高度”媒体特征描述了输出设备的目标显示区域的高度。对于连续媒体，这是视口的高度，包括渲染滚动条的大小（如果有）。对于分页媒体，这是页面框的高度。

因此，要正确配对CSS Media Queriesand JavaScript，请始终使用screen.widthandscreen.height

于 2013-05-13T20:50:38.127 回答
0

如果你想遵循 CSS 媒体查询的风格，你必须使用 .resize() 函数，代码如下：

var resizeBool = ($(this).height() < 750);
$(window).resize(function() {
    var resizeBoolTmp = ($(this).height() < 750);
    if (resizeBool === resizeBoolTmp) return;
    resizeBool = resizeBoolTmp;
    //your code that must be updated when the size changes
    //from previous comments/answer, maybe this? 
    //$('#footer_index').delay(800).transition({y: -155}, 1000, 'snap');
});

此代码仅在一侧或另一侧通过高度限制时更新操作。 这是一个显示其工作原理的片段（检查控制台以查看达到宽度限制时会发生什么）。

于 2013-05-13T20:47:57.337 回答