javascript - 获取浏览器宽度的像素值以进行响应式设计

Question

我最近阅读了很多有关响应式设计的文章，并试图了解最佳实践。我看到提到的是内容驱动的断点，而不是特定于设备的断点。

真正有用的是在调整浏览器大小时获取特定值时获取浏览器的精确宽度(以像素为单位)。我继续使用 chrome 扩展程序并添加了“浏览器宽度”扩展程序，这似乎正是我所需要的。然而，经过一些测试后，“浏览器宽度”给出的值大约宽 20 像素。

还有什么我可以用来得到我正在寻找的东西吗？？

Answer 1

下面的JS就够了:

                function jsUpdateSize(){
                    // Get the dimensions of the viewport
                    var width = window.innerWidth ||
                                document.documentElement.clientWidth ||
                                document.body.clientWidth;
                    var height = window.innerHeight ||
                                 document.documentElement.clientHeight ||
                                 document.body.clientHeight;

                    document.getElementById('jsWidth').innerHTML = width;  // Display the width
                    document.getElementById('jsHeight').innerHTML = height;// Display the height
                };
                window.onload = jsUpdateSize;       // When the page first loads
                window.onresize = jsUpdateSize;  

一旦知道差异，就可以从获得的值中减去它。

下面将对 JQuery 执行:

                function jqUpdateSize(){
                // Get the dimensions of the viewport
                var width = $(window).width();
                var height = $(window).height();

                $('#jqWidth').html(width);      // Display the width
                $('#jqHeight').html(height);    // Display the height
            };
            $(document).ready(jqUpdateSize);    // When the page first loads
            $(window).resize(jqUpdateSize);     // When the browser changes size