如何动态检测浏览器视口大小的变化？

Question

我一直在缩放方面遇到问题...自动...动态...自适应...等...

我看到过一些网站，例如，当您缩小窗口时。抓住一个角落，让窗口变小，字体变大，东西四处移动......

我有活动的部分，我不知道如何动态检测浏览器视口...这是令人耳目一新的事情还是？...

正如您在此处看到的，我使用的这些动态功能仅在屏幕刷新时起作用，特别是我有一台平板电脑，如果我以横向方式访问页面，则不适用；如果我旋转它然后刷新，它适用。

<script language="JavaScript" type="text/javascript">
var x = screen.width;
var y = screen.height;
function scale() {
var z = x/y;
    if (z<1) {
     document.getElementById('header').style.width = "100%";
     document.getElementById('menu').style.marginLeft = "0";
     document.getElementById('menu').style.width = "20%";
     document.getElementById('menu2').style.width = "30%";
     document.getElementById('menu3').style.width = "20%";
     document.getElementById('menu4').style.width = "20%";
     document.getElementById('properties').style.width = "30%";
     document.getElementById('properties').style.marginLeft = "35%";
    }
}
scale();
</script>

这是来自 Stack Overflow 的某人提供的关于字体的代码，我想它可能与我要去的方向相似

$( window ).resize(function() {
    $( "#container" ).css("font-size",function() {
        var value = $( "#container" ).css("width");
        console.log(parseInt(value)/24 + "pt");
        return parseInt(value)/24 + "pt";
    }) ;
});

什么部分是动态的？

这个console.log，我没用过

任何帮助将不胜感激

Answer 1

看了你的问题和cmets，我还是有点迷茫，不过也许这会有所帮助。

首先，学会使用Chrome's Dev Tools。他们是太棒了！你现在需要知道的最重要的事情是：

使用console.log：

1. 在你的 JavaScript 中，写一行 console.log('Hello World!');
2. 在Google Chrome 中打开该页面
3. 按 F12 切换（打开/关闭）开发工具
4. 它可能位于Resources 选项卡上，这是检查所有资源是否已加载的好地方，但不是您要查找的资源。
5. 点击标签Console
6. 维奥拉！如果那行 JS 已经运行，你应该会看到 Hello World!。
7. 欢迎来到 awesomsauce！

现在对于调整大小测试的更简单的视觉效果，请尝试以下 jQuery 增强 JavaScript：（注释解释，如果您愿意，请删除 cmets）

//  This first line is the same as JavaScript's `document.ready = function() {}
//  This simply starts your code running as soon as the document is loaded and ready to go
//  It's safe to use in <head> or in <body> and will always ensure your JS is running with the page load
$(function() {
    //  Here I use .on instead of direct reference to the event as this is just good practice4 with jQuery
    //  You'll later learn you can use this with prewritten methods to "turn on/off" methods asigned to specific events
    $(window).on('resize', function(e) {
        //  Little JS Tip, No need to write `var` 50thousand times. Just use a comma and write your new variable
        var x = $(this).width(),    //  variable for window width assigned to `x`
            y = $(this).height(),   //  variable for window height assigned to `y`
            z = x/y,    //  your conversion you were using in the code you have in your question, there's plenty of different ways to test for size changes, do some Googling on "aspect ratio" as it's usually best way to go
            //  this next line is a little complicated
            //  It's assigning a variable based on result of an `inline if statement`
            //  What it says: if (element with id 'myOutput' exist) then assign that element and empty it of all it's HTML, else build the element using jQuery's element object method and append it to the <body>
            //  jQuery's element object building is easy, just remember it like this: jQuery("<tagName />", { object of attributes })
            output = $('#myOutput').length ? $('#myOutput').empty() : $('<div />', { id: 'myOutput', style: 'background: #ffa; padding: 10px; position: fixed; right: 30px; top: 30px; z-index: 999;' }).appendTo('body'),
            //  the following lines build the inner HTML for showing the results of our window dimensions
            pX = $('<p />', { text: 'x: '+x }).appendTo(output),
            pY = $('<p />', { text: 'y: '+y }).appendTo(output),
            pZ = $('<p />', { text: 'z: '+z.toFixed(5) }).appendTo(output);
    });
})

如果您现在使用的是 Google Chrome，那么您可以立即进行测试！只需按F12 并单击Console 选项卡。复制下面的最小化代码，然后单击Console。您应该看到一个闪烁的光标准备好输入。粘贴代码并按回车！然后只需调整窗口大小并观看右上角！ *note_{在右上角你可能会看到 Chrome 自己的尺寸框。我的是黄色背景}

缩小代码：

$(function(){$(window).on("resize",function(a){a=$(this).width();var c=$(this).height(),d=a/c,b=$("#myOutput").length?$("#myOutput").empty():$("<div />",{id:"myOutput",style:"background: #ffa; padding: 10px; position: fixed; right: 30px; top: 30px; z-index: 999;"}).appendTo("body");$("<p />",{text:"x: "+a}).appendTo(b);$("<p />",{text:"y: "+c}).appendTo(b);$("<p />",{text:"z: "+d.toFixed(5)}).appendTo(b)})});