2013-05-13 81 views
0

我在我的網頁此語句格式的網頁尤其是這樣他們就可以用小的上網本屏幕更好的查看:鏈接關係查詢 - 我可以創建一個JavaScript關係以及CSS?

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

任何想法呢?

非常感謝一如既往,

回答

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 }); 
+0

謝謝大衛, 我用你的代碼,而是換成$ .getScript( '/路徑/要/ otherfile.js' ); with $(document).ready(function(){$('#footer_index')。delay(800)。過渡({y:-155},1000,'snap'); 但它沒有工作 - 是正確的格式? – annoyingnewbie 2013-05-13 20:24:41

+0

使用這個將只會第一次工作,所以它不會像媒體查詢。 – 2013-05-13 20:26:35

+0

仍然無法正常工作。感謝您的時間 - 可能很快就會回來一個更清晰的問題。 – annoyingnewbie 2013-05-14 23:49:33

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'); 
}); 

此代碼僅在高度限制由一方或另一方傳遞時更新動作。 Here是顯示其工作原理的代碼片段(查看控制檯以查看達到寬度限制時會發生的情況)。

1

根據Link Types ReferenceJavaScript不是鏈接類型,所以你的答案是否定的。

您可以簡單地使用您的需求如下:

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


注意:根據Media Queries 'Height' Spec

的 '高度' 媒體特徵描述目標 的高度輸出設備的顯示區域。對於連續媒體,這是視口的高度,包括呈現的滾動條的大小(如果有 any)。對於分頁媒體,這是頁面框的高度。

所以要有的CSS Media QueriesJavaScript適當配對,始終使用screen.widthscreen.height