HTML5：移动设备上的 Div 背景大小随机错误
Posted
技术标签:
【中文标题】HTML5：移动设备上的 Div 背景大小随机错误【英文标题】：HTML5: Div background size randomly wrong on mobile 【发布时间】：2021-12-07 14:54:54 【问题描述】：我正在开发一个带有预定义消息的“假”聊天应用程序。忽略实际内容。
首先，它在 PC 上运行得非常好，但似乎随机地，较短消息的 div 大小不能按需要缩放，所以消息背景（以及我猜的实际 div）只有一半或 3/4 大小它应该是什么，并且信息溢出到一边。
对我来说奇怪的是它对大多数其他消息都很好（尽管有些有换行符，尽管没有达到最大宽度，但我没有添加自己）而且它似乎试图缩放（见第二张图片）所以它的大小不一致。
我正在使用 .before JS/jQuery 添加消息。 它是一个 div，其中包含一个段落，其中填充了来自数组的消息。 这是代码sn-p
// 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>【问题讨论】：
你能edit你的问题添加一个minimal reproducible example，特别是一个带有所有HTML代码的sn-p吗？另外，我建议你使用min-width: fit-content;
@Elikill58 谢谢！我用最小宽度更新了它也是个好主意，我一定会把它放到代码中
完美！对我来说它有效：prntscr.com/1ww02ce
@Elikill58 你在手机上测试过吗？因为在浏览器中，我的原始解决方案也有 0 个问题^^
我只是测试一下：prntscr.com/1ww1c6g
【参考方案1】：
为了理解为什么会出现这个问题，我需要说，pc和mobile的分辨率不同。为了获得相同的东西，你需要用@media (min-width: 568px) and (max-width: 1023px)更新你的css代码
min-width 表示修改发生时的最小分辨率，max-width 表示修改发生时的最大分辨率。
为了解决这个问题，你需要使用这个语法并且在花括号中你需要修改对象以匹配你想要的。
希望这很有用！
【讨论】：
感谢您的回复，尽管我不确定这在这种情况下有何帮助，因为它适用于某些消息但不适用于其他消息，而且它似乎并非源于该决议。容器类设置为选择屏幕百分比作为最大宽度或特定的 REM 数字以适应不同的屏幕尺寸，并且消息本身设置为从各自的侧面推送（他们的消息来自左侧，您的消息来自右侧）如果你想测试它，我添加了一个 sn-p :)【参考方案2】：如评论中所说，你必须设置一个min-width。
你可以手动设置px，但在你的情况下，最好的方法是使用min-width: fit-content;将最小宽度设置为当前内容（并保持正常宽度与正常规则）
【讨论】：
谢谢！我试试看 遗憾的是，当我对其进行测试时，它无法按预期工作。如果没有常规宽度，则 div 会拉伸以填充整个宽度（忽略最大宽度）。但是使用最小宽度和宽度设置，无论消息有多长，它都默认为最大宽度。我猜你测试了我上传的代码，这是我没有 min-width 属性的原始代码^^ 只是为了澄清我的代码在 pc 浏览器中 100% 的工作时间（即使是开发模式手机布局）但是那里在设备上的实际移动浏览器上运行它时会出现问题。大多数消息都很好，但有些消息如图所示以上是关于HTML5：移动设备上的 Div 背景大小随机错误的主要内容，如果未能解决你的问题，请参考以下文章