根据样式表运行 JavaScript

Question

我有下面的 JavaScript，它只在屏幕宽度低于 1024 像素时运行，这是我想要的，它工作正常。但是，当只有屏幕宽度低于 1024px 并且调用以下样式表时，我真的需要让它运行：<link rel="stylesheet" media="screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi)" href="assets/css/tablet-and-mobile.css" />

//Apply swipping//
    function applySnap() {
        var width = window.innerWidth;
        if (width <= 1024) {
        if (window.snap) {
            window.snap.enable();
        } else {
            window.snap = new Snap({
            element: document.getElementById('page')
            });
        }
        } else {
        if (window.snap) {
            window.snap.disable();

        if( window.snap.state().state !=='closed' ){
            window.snap.close();
            }
        }
        }

        //Close slider when orientation changes//
        window.addEventListener("orientationchange", function () {
        if (window.snap.state().state !== 'closed') {
            window.snap.close( 0 );

        }
            }, false);
        }
        window.onresize = applySnap;
        applySnap();


        //Swipping (Open/Close Button)//
        $('.secondHeader-menuButton').on('click', function (e) {
            e.preventDefault();
        if (window.snap.state().state === "closed") {
            window.snap.open('left');
        } else {
            window.snap.close('left');
        }
    }); 

为什么？是的，它真的很复杂，但看看我之前的问题HERE 如您所见，我正在使用该解决方案，但也这样做了：

<link rel="stylesheet" type="text/css" href="assets/css/core.css">
<link rel="stylesheet" media="screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi)" href="assets/css/tablet-and-mobile.css" />
<link rel="stylesheet" media="screen and (max-width: 1000px)" href="assets/css/tablet-and-mobile.css" />

这解决了问题！但是我有一个滑动导航，只需要在平板电脑上显示，即仅在启用 tablet-and-mobile.css 时！但因为我有以下行：<link rel="stylesheet" media="screen and (max-width: 1000px)" href="assets/css/tablet-and-mobile.css" /> 当屏幕尺寸低于 1024px 时，滑块 js 将运行。

Answer 1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $(window).on("load resize",function(e){
        // current window width
        var outer_width = $(window).width();

        function getPPI(){
            // create an empty element
            var div = document.createElement("div");
            // give it an absolute size of one inch
            div.style.width="1in";
            // append it to the body
            var body = document.getElementsByTagName("body")[0];
            body.appendChild(div);
            // read the computed width
            var ppi = document.defaultView.getComputedStyle(div, null).getPropertyValue('width');
            // remove it again
            body.removeChild(div);
            // and return the value
            return parseFloat(ppi);
        } 

        if(outer_width < 1024 && getPPI() > 120){
            //do somethink - this is a place for you function
        }

        //console.log(outer_width, getPPI()); 
    });       
});
</script>

Answer 2

您可以使用 jQuery，编写一个函数（如果宽度为 =

用于 dpi 功能 -> jsfile 或 dpi function

编写main函数并设置if dpi is > 120 and width is =< 1024px - do something

Answer 3

您应该查看 twitter bootstrap 及其响应式功能。

Answer 4

Modernizr 有一些很棒的功能可以基于媒体查询应用 js。文档here。

Answer 5

试试看

$(document).ready(function() {
    $(window).on("load resize",function(e){
        // current window width
        var outer_width = $(window).width();

        function getPPI(){
            // create an empty element
            var div = document.createElement("div");
            // give it an absolute size of one inch
            div.style.width="1in";
            // append it to the body
            var body = document.getElementsByTagName("body")[0];
            body.appendChild(div);
            // read the computed width
            var ppi = document.defaultView.getComputedStyle(div, null).getPropertyValue('width');
            // remove it again
            body.removeChild(div);
            // and return the value
            return parseFloat(ppi);
        } 

        if(outer_width < 1024 && getPPI() > 120){
            //do somethink - this is a place for you function

                if(window.snap){
                    window.snap.enable();
                }
                else{
                    window.snap = new Snap({
                        element: document.getElementById('page')
                    });
                }
        }
        else{
            if(window.snap){
                window.snap.disable();
                if( window.snap.state().state !=='closed' ){
                    window.snap.close();
                }
            }
        }
        //Close slider when orientation changes//
        window.addEventListener("orientationchange", function () {
            if (window.snap.state().state !== 'closed') {
                window.snap.close( 0 );
            }
        }, false);

        //console.log(outer_width, getPPI()); 
    }); 

    $('.secondHeader-menuButton').on('click', function (e){
        e.preventDefault();
        if(window.snap.state().state === "closed"){
            window.snap.open('left');
        } 
        else{
            window.snap.close('left');
        }
    });     
});