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

我在缩放方面遇到了问题。。。自动的动态自适应。。。。等等。

我见过一些网站，当你把窗口缩小时，比如抓住一个角落，把窗口缩小，字体变大，东西四处移动。。。

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

正如你在这里看到的，我使用的这些动作只在屏幕刷新时起作用，尤其是我有一台平板电脑，如果我以横向方式访问页面，它就不适用；如果我旋转它然后刷新，它就会应用。

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

什么部分是动态的？

这个控制台日志，我以前没有用过

任何帮助都将非常感谢

看完你的问题和评论后，我仍然有点困惑，但也许这会有所帮助。

首先，学习使用Chrome的开发工具。他们是真棒！现在你需要知道的最重要的事情是：

使用console.log:

在您的JavaScript中，写一行类似console.log('Hello World!');
在Google Chrome中打开该页面
按F12切换（打开/关闭）DevTools
它可能会出现在Resources选项卡上，这是一个检查所有资源是否已加载的好地方，但不是您要查找的资源
单击标记为Console的选项卡
维奥拉！如果JS的那一行已经运行，您应该会看到Hello World!
欢迎来到美味酱

现在，为了更容易地进行调整大小测试，请尝试以下jQuery增强的JavaScript：（注释解释，如果您愿意，请删除注释）

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

如果你现在正在使用谷歌浏览器，那么你现在就可以测试了！只需按F12并单击Console选项卡。复制下面最小化的代码，然后单击Console。您应该看到一个闪烁的光标准备输入。粘贴代码并按enter！然后只需调整窗口大小并观看右上角！*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)})});

相关内容

最新更新

热门标签：