个人中心
gpt4 book ai didi

javascript - setInterval(...) 没有响应视口(viewport)高度的减小

转载 作者：行者123 更新时间：2023-12-03 03:04:58 25 4
gpt4 key购买 nike

场景

我设置了三个简单的网页，尽管页面刷新之间视口(viewport)的大小发生了变化，但其内容应始终保持在浏览器视口(viewport)的垂直和水平方向上居中。我使用了 W3C.org 的条目 "Centering Things"有关水平和垂直居中的帮助。我正在 Chrome 和 Safari 中借助开发者工具测试代码。

问题

当我加载index.php页面时，页面内容最初是居中的，正如它应该的那样。当我更改视口(viewport)的宽度或水平值时，浏览器会通过不断地重新水平居中页面内容来做出响应。当我增加视口(viewport)的高度或垂直值时，浏览器也会通过不断地重新垂直居中页面内容来做出响应 - 到目前为止一切顺利。但是当我减小视口(viewport)的高度时，body元素的高度不会改变，并且页面内容保持固定在body元素高度值的最后一个垂直位置它是最大的。

视口(viewport)高度减小得越多，页面及其内容的可滚动部分就越大(根本不应该有可滚动部分)。 [但是，如果您要刷新页面，您会发现页面内容重新以当前视口(viewport)尺寸为中心。只要您不刷新页面，然后尝试减小视口(viewport)的高度，就会出现此问题。] 再次增加视口(viewport)的高度时，页面内容将保持固定，直到视口(viewport)的高度值匹配并且超过了 body 元素的高度值，此时浏览器会通过不断地重新垂直居中页面内容来进行响应，正如它应该做的那样。

尽管之前曾多次实现过此类构造，但到目前为止我还没有遇到过此类问题。在遇到这个问题之前，我对浏览器经历了不同的挫败感。浏览器没有反射(reflect)对 CSS 所做的更改，此时我绕过了浏览器的缓存。我能够克服这种挫败感，但它的后果可能与当前的问题有一定关系。

所有三个页面的.js

更新了.js

$(function() {



var viewportWidth = $( window ).width();
var viewportHeight = $( window ).height();
$( "body" ).css({
    width: viewportWidth,
    height: viewportHeight
});

$( window ).resize(function() {

    viewportWidth = $( window ).width();
    viewportHeight = $( window ).height();
    $( "body" ).css({
        width: viewportWidth,
        height: viewportHeight
    });

});



});

原始.js

$(function() {



var viewportWidth = $( window ).width();
var viewportHeight = $( window ).height();

$( "body" ).css({
    width: viewportWidth,
    height: viewportHeight
});

setInterval(function() {

    viewportWidth = $( window ).width();
    viewportHeight = $( window ).height();

    $( "body" ).css({
        width: viewportWidth,
        height: viewportHeight
    });

}, 10);



});

index.php

<!DOCTYPE>
<html>

<head>
    <meta charset="UTF-8">
    <title>Interactive | Home</title>
    <link href="css/laptop-index.css" rel="stylesheet">
</head>

<body>
    <div id="container">
        <div id="register"><a href="pages/register.php">Register</a></div>
        <div id="login"><a href="pages/login.php">Login</a></div>
    </div>

    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/jsindex.js"></script>
</body>

</html>

index.php 的 CSS

body {
    margin: 0;
    padding: 0;
    position: relative
}

#container {
    position: absolute;

    margin: 0;
    padding: 0;

    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

#container div {
    display: inline-block;
    padding: 10px 20px 10px 20px;
    background-color: #FFFFFF;
    border: 1pt solid black
}
    #register {
        margin-right: 50px
    }

    #register:hover, #login:hover {
        background-color: #AAFFFF
    }
        #container div a {
            color: black;
            text-decoration: none
        }
            #container div a:hover {
                color: blue
            }

注册.php

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Interactive | Registration</title>
    <link href="../css/laptop-register.css" rel="stylesheet">
</head>

<body>
    <form action="$_SERVER[PHP_SELF]" id="form" method="post">
        <input name="my_firstname" placeholder="Your first name" type="text">
        <input name="my_lastname" placeholder="Your last name" type="text">
        <br>
        <input name="my_address" placeholder="Your street address" type="text">
        <input name="my_address" placeholder="Your street address continued" type="text">
        <input name="my_city" placeholder="Your city" type="text">
        <input name="my_state" placeholder="Your state" type="text">
        <input name="my_zip" placeholder="Your zip" type="text">
        <input name="my_country" placeholder="Your country" type="text">
        <br>
        <input name="my_phone" placeholder="Your phone number" type="tel">
        <input name="my_email" placeholder="Your email" type="text">
        <br>
        <input name="my_username" placeholder="Your username" type="text">
        <input name="my_password" placeholder="Your password" type="password">
        <br>
        <textarea cols="50" name="my_message" placeholder="Your message" rows="5" type="text"></textarea>
        <br>
        <input type="submit" value="register">
    </form>

    <div id="back_button"><a href="../index.php">Return to Home Page</a></div>

    <script src="../js/jquery-3.2.1.js"></script>
    <script src="../js/register.js"></script>
</body>

</html>

login.php

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Interactive | Login</title>
    <link href="../css/laptop-login.css" rel="stylesheet">
</head>

<body>
    <form action="$_SERVER[PHP_SELF]" id="form" method="post">
        <input name="my_username" placeholder="Your username" type="text">
        <input name="my_password" placeholder="Your password" type="password">
        <br>
        <input type="submit" value="login">
    </form>

    <div id="back_button"><a href="../index.php">Return to Home Page</a></div>

    <script src="../js/jquery-3.2.1.js"></script>
    <script src="../js/login.js"></script>
</body>

</html>

register.php 和 login.php 的 CSS

body {
    margin: 0;
    padding: 0;
    position: relative
}

#form {
    position: absolute;

    margin: 0;
    padding: 0;

    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

#back_button a {
    color: black;
    text-decoration: none
}
#back_button a:hover {
    color: blue
}

最佳答案

您实际上应该只使用 CSS 来实现此目的，因为这正是 CSS 的用途。查看this great guide关于如何在 CSS 中将内容居中。

您可能还想使用 CSS 中的“vh”和“vw”单位来根据视口(viewport)大小调整内容的大小。

关于javascript - setInterval(...) 没有响应视口(viewport)高度的减小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47212548/

25 4 0
文章推荐： flutter - 为什么硬编码时TextSpan中的文本会自动换行，而通过对象传递时为什么不自动换行
文章推荐： javascript - 模板文字语法在 IE11 中不起作用
文章推荐： firebase - 如何在Dart的streambuilder中切换正在收听的流？
文章推荐： azure - 文件是否可以存储在 Azure cosmos db 上，用于附加属性的顶点？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com