Question

我有下面的JavaScript，它只在屏幕宽度低于1024px时运行，这是我想要的，它工作正常。但是，当只有屏幕宽度低于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" />

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

Answer 1

你可以使用jQuery，编写一个函数（如果width =＆lt; 1024做某事，检查当前宽度是什么），创建另一个函数来检查DPI）

用于dpi功能 - ＆gt; jsfile或dpi function

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

Answer 2

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

根据样式表运行JavaScript

5 个答案: