时间戳

首页 > 解决方案 > HTML5：移动设备上的 Div 背景大小随机错误

javascript - HTML5：移动设备上的 Div 背景大小随机错误

问题描述

我正在开发一个带有预定义消息的“假”聊天应用程序。忽略实际内容。

首先，它在 PC 上运行得非常好，但似乎随机地，较短消息的 div 大小并没有按需要缩放，所以消息背景（以及我猜的实际 div）只有它大小的一半或 3/4应该是，并且消息溢出到一边。

问题01 问题02

对我来说奇怪的是它对大多数其他消息都很好（尽管有些有换行符，尽管没有达到最大宽度，但我没有添加自己）而且它似乎试图缩放（见第二张图片）所以它不是一致的相同的错误尺寸。

我正在使用 .before JS/jQuery 添加消息。它是一个 div，其中包含一个段落，其中填充了来自数组的消息。这是代码片段

// Delay between sending and displaying the new message. during this time the "..." is shown.
var msgAnimDelay = 500;

/* HTML wrappers for the message div */
const msgTheyHead = "<div class='message they'><p class='they'>";
const msgYouHead = "<div class='message you'><p class='you'>";
const msgEnd = "</p></div>"
/* messages in order, wrapped by divs above. y=yes, n=no, m=maybe, d=data, f=failed*/
const theirMessages = 
[
    "this is a medium length sentence this is a.", //t1
    "this is a medium length sentence this is a medium length sentence", //t2_n
    "mississippiii", //t2_y
    "this is a long sentencethis is a long sentencethis is a long sentencethis is a long sentencethis is a long sentencethis is a long sentencethis is a long sentencethis is a long sentencethis is a long sentence", //t3
    "this is a sentence with br <br> this is a long sentencethis is a long sentencethis is a long sentence heres another br <br> this is a medium sentencethis is a medium sentencethis is a medi", //t3_n
];

const yourMessages=
[
    "short phra", //q0
    "nayy", //q1_1
    "OK", //q1_2
    "this is a short sentence", //q2_1
    "this is a longer sentence a longer sentence a longer sentence a longer sentence", //q2_2
    "this is a very long sentence this is a very long sentence this is a very long sentence this is a very long sentence this is a very long sentence this is a very long sentence this is a very long sentence now a break <br> this is a very long sentencethis is a very long sentencethis is a very long sentencethis is a very long sentencethis is a very long sentencethis is a very long sentence", //q2_3
];

/* un-hides animation and calls show message after delay. */
function newThemMessage(msgID){
    $("#typing").removeClass("hidden");
    $("#chat-history").scrollTop($("#chat-history")[0].scrollHeight);
    setTimeout(showMessage, msgAnimDelay, true, msgID);
}

/* hides animation, plays sound, adds message from array, using the wrapper variables*/
function showMessage(bThem, msgID){
    if (bThem) {
        $("#typing").addClass("hidden");
        $("#typing").before(msgTheyHead + theirMessages[msgID] + msgEnd);
    } else {
        $("#typing").before(msgYouHead + yourMessages[msgID] + msgEnd);
    }
    //scroll down to newest message
    scrollToLatest();
}

// set height of chat history
function updateLayout(){
    var navHeight = $("#nav-bar").outerHeight(true);
    var choiceHeight = $("#chat-choices").outerHeight(true);
    var windowHeight = $(window).height();
    var chatHeight = (windowHeight - (navHeight + choiceHeight)) + "px";
    $("#chat-history").css({"max-height": chatHeight, "height": chatHeight, "margin-top": navHeight});
}

function scrollToLatest(){
    $("#chat-history").scrollTop($("#chat-history")[0].scrollHeight);
}

/* Responses */
//q0
function clicked0(){
    var randomIndex = Math.floor(Math.random() * yourMessages.length);
    showMessage(false,randomIndex);
}
//q1
function clicked1(){
    var randomIndex =  Math.floor(Math.random() * theirMessages.length);
    newThemMessage(randomIndex);
}

$(document).ready(function(){
    updateLayout();
    $(window).resize(updateLayout);
});
/*
    INTERESTING STUFF at the bottom (line ~75)
*/

*, *::before, *::after {
    box-sizing: border-box;
}
body, h1, h2, h3, p {
    margin: 0;
}
body {
    font-weight: 400;
    font-size: 1.3125rem;
    line-height: 1.6;
    background-color: #47434C;
}
h1, h2, h3 {
    font-weight: 900;
    line-height: 1;
}
.text-center{
    text-align: center;
}
.hidden{
    display: none;
}
div.hidden{
    display: none;
}
header, section{
    padding: 1rem 0;
}

.bg-light {
    background-color: white;
    color: black;
}
.bg-dark {
    background-color: blue;
    color: white;
}
#nav-bar{
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 5;
}

.btn{
    font-weight: 500;
    font-size: 1.3rem;
    background-color: #146aa0;
    color: WHITE;
    min-height: 3rem;
    padding: 0.6em 1.0em;
    margin-bottom: 0.7rem;
    border-radius: 5px;
    margin-inline: 0.5rem;
   
}

.flex-container{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    align-items: center;
    align-content: center;
}

/*
    INTERESTING STUFF STARTS HERE
    INTERESTING STUFF STARTS HERE
    INTERESTING STUFF STARTS HERE
*/

.container{
    margin-inline: auto;
    width:min(90%, 70.5rem);
}

.message{
    padding: 0.5rem;
    background-color: #F7F4EA;
    margin-bottom: 0.7rem;
    width: fit-content;
    max-width: min(70%, 40rem);
    
    block-size: fit-content;
    border-radius: 10px;
    position: relative;
    display: block;
}

p.message{}
.you{
    margin-right: 0;
    margin-left: auto;
    background-color: #99D6FF;
}
.they{
    background-color: #F7F4EA;
}

p.you::before{
    content: "You";
    display: block;
    font-size: 1.1rem;
}

p.they::before{
    content: "They";
    display: block;
    font-size: 1.1rem;
}

#chat-history{
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 1.5rem;
}

#chat-choices{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    min-height: 6rem;
    z-index: 5;
}
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>chatapp</title>
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <!-- Navigation bar -->
    <header id="nav-bar" class="bg-dark text-center">
        <div class="container">
            <h1>
                CHAT
            </h1>
        </div>
    </header>

    <!-- Chatverlauf -->
    <section id="chat-history" class="bg-contrast">
        <div class="container">
            
            <div class="message they">
                <p class="they">
                    Hello HelloHelloHe lloH ello Hello<br><br>                    
                    This is some more text more text more text more text more text more text<br>
                </p>
            </div>
            <div class="message they">
                <p class="they">
                    click OK if you understood
                </p>
            </div>
            
            <div id="typing" class="message they hidden">
                <p id="typing-anim" class="they">...</p>
            </div>
        </div>
    </section>

    <!-- Chat Responses -->
    <section id="chat-choices" class="bg-light">
        
        <div class="container flex-container">
            <!-- <p>this is the chat selection</p> -->
            <div id="q0" class="flex-container">
                <button class="btn" id="btn0_1" onclick="clicked0()">Add You-Message</button>
                <button class="btn" id="btn0_1" onclick="clicked1()">Add They-Message</button>
            </div>
        </div>
    </section>
</body>

标签： javascriptandroidhtmlcssdom

解决方案

为了理解为什么会出现这个问题，我需要说，pc和mobile有不同的分辨率。为了获得相同的东西，你需要用@media (min-width: 568px) and (max-width: 1023px){} min-width表示最小分辨率更新你的css代码，当修改发生时, max-width 表示修改发生时的最大分辨率。为了解决这个问题，你需要使用这个语法并且在花括号中你需要修改对象以匹配你想要的。希望这很有用！

推荐阅读