根据媒体查询肖像模式禁用javascript文件

时间:2015-03-04 21:48:36

标签: javascript media-queries horizontal-scrolling landscape-portrait

我想在ipad肖像模式下从一个javascript文件切换到另一个javascript文件(因此我可以在纵向模式下从水平滚动切换垂直滚动)。

我找到了类似:http://wicky.nillia.ms/enquire.js/

的内容

但我无法根据此查询禁用/启用javascript文件:

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) 

3 个答案:

答案 0 :(得分:0)

我认为你不需要javascript来做到这一点。这是一个jsfiddle example,下面是css:

@media only screen and (min-width : 768px) and (max-width : 1024px)
{
    .container {
        overflow-y: scroll;
    }
}

答案 1 :(得分:0)

我相信CSS媒体查询用于样式设计和响应式设计。

我会看一些使用javascript本身动态改变包含的脚本文件的东西。

http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml举个例子

function removejscssfile(filename, filetype){
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
var allsuspects=document.getElementsByTagName(targetelement)
for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
    allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()
}

}

removejscssfile(" somescript.js"," js")//删除所有出现的" somescript.js"在页面上 removejscssfile(" somestyle.css"," css")//删除所有出现的" somestyle.css"在页

我希望这有助于指明你正确的方向。

答案 2 :(得分:0)

我通过在外部javascript文件本身的javascript中使用媒体查询来实现它(它只是导致垂直/水平更改的一行):

var mq = window.matchMedia('only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)');if(mq.matches) {$(document).ready(function () {$.localScroll.defaults.axis = 'y'; $.localScroll(); });} else {$(document).ready(function () {$.localScroll.defaults.axis = 'x'; $.localScroll(); });}

更多信息:http://krasimirtsonev.com/blog/article/Using-media-queries-in-JavaScript-AbsurdJS-edition

虽然我必须在它工作之前刷新页面,但我还没有在真正的ipad上测试过..

相关问题