Javascript 如何防止移动键盘（android）弄乱布局？
当你点击一个Javascript 如何防止移动键盘（android）弄乱布局？,javascript,android,jquery,html,css,Javascript,Android,Jquery,Html,Css,当你点击一个输入字段时，我的网格布局被推上，因为几乎所有的东西都在使用%作为高度这是有道理的，但是无论如何都有办法阻止它被弄乱。我曾尝试使用媒体查询来更改.grid container网格模板行，唯一的问题是需要在很多手机上进行测试，以确保它能够根据需要正确输出 有没有通过CSS或Jquery/JS的解决方案 HTML代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g
输入%高度.grid container网格模板行<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
<title>Blank App</title>
<link rel="stylesheet" type="text/css" href="./CSS/all.css">
<link rel="stylesheet" type="text/css" href="./CSS/main.css">
<link rel="stylesheet" type="text/css" href="./CSS/messages.css">
<script type="text/javascript" src="./JS/jquery-3.4.1.js"></script>
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
</head>
<body>
<div class="grid-container">
<div class="row">
<div class="col-12">
<div class="topnav">
<a href="myShifts.html"><i class="fas fa-clock fa-3x fa-fw"></i></a>
<a href="timesheets.html"><i class="fas fa-edit fa-3x fa-fw"></i></a>
<a href="availability.html"><i class="fas fa-calendar-alt fa-3x fa-fw"></i></a>
<a href="messages.html"><i class="fas fa-comments fa-3x fa-fw"></i></a>
<a href="accounts.html"><i class="fas fa-cog fa-3x fa-fw"></i></a>
<i class="fas fa-bars fa-3x fa-fw icon-float-right" id="sidenav-icon"></i>
<div class="sidenav">
<a class="closebtn">×</a>
<a href="myShifts.html">
<div class="flex-container">
<div class="item img"><i class="fas fa-clock fa-lg"></i></div>
<div class="item text">Shifts</div>
</div>
</a>
<a href="timesheets.html">
<div class="flex-container">
<div class="item img"><i class="fas fa-edit fa-lg"></i></div>
<div class="item text">Timesheets</div>
</div>
</a>
<a href="availability.html">
<div class="flex-container">
<div class="item img"><i class="fas fa-calendar-alt fa-lg"></i></div>
<div class="item text">Availability</div>
</div>
</a>
<a href="messages.html">
<div class="flex-container">
<div class="item img"><i class="fas fa-comments fa-lg"></i></div>
<div class="item text">Messages</div>
</div>
</a>
<a href="messages.html">
<div class="flex-container">
<div class="item img"><i class="fas fa-cog fa-lg"></i></div>
<div class="item text">Settings</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="border-header">
<h3>NAME</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="msg-page">
<div class="messages" id="msg-list">
<div class="msg">
<div class="received">
<div class="msg-header">
<span class="time">13:24 | September 12</span>
</div>
<div class="msg-body">
<p>Text Msg HereText Msg HereText Msg HereText Msg Here</p>
</div>
</div>
</div>
<div class="msg">
<div class="sent">
<div class="msg-header">
<span class="time">13:29 | September 12</span>
</div>
<div class="msg-body">
<p>Text Msg HereText Msg Here</p>
</div>
</div>
</div>
<div class="msg">
<div class="received">
<div class="msg-header">
<span class="time">14:12 | September 12</span>
</div>
<div class="msg-body">
<p>Text Msg HereText Msg Here</p>
</div>
</div>
</div>
<div class="msg">
<div class="received">
<div class="msg-header">
<span class="time">16:39 | September 14</span>
</div>
<div class="msg-body">
<p>Text Msg HereText Msg HereText Msg Here</p>
</div>
</div>
</div>
<div class="msg">
<div class="received">
<div class="msg-header">
<span class="time">13:24 | September 12</span>
</div>
<div class="msg-body">
<p>Text Msg Here Text Msg Here Text Msg Here Text Msg Here Text Msg Here</p>
</div>
</div>
</div>
<div class="msg">
<div class="sent">
<div class="msg-header">
<span class="time">13:29 | September 12</span>
</div>
<div class="msg-body">
<p>Text Msg HereText Msg HereText Msg Here</p>
</div>
</div>
</div>
<div class="msg">
<div class="received">
<div class="msg-header">
<span class="time">14:12 | September 12</span>
</div>
<div class="msg-body">
<p>Text Msg Here</p>
</div>
</div>
</div>
<div class="msg">
<div class="received">
<div class="msg-header">
<span class="time">16:39 | September 14</span>
</div>
<div class="msg-body">
<p>Text Msg HereText Msg Here</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="footer">
<textarea id="txtmsg-body" rows="3" placeholder="Enter message here.."></textarea>
<button id="msg-send">
<i class="fas fa-paper-plane fa-2x fa-fw"></i>
</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="./JS/main.js"></script>
<script type="text/javascript" src="./JS/messages.js"></script>
</body>
</html>
.grid-container {
display: grid;
/* Might have to change this based on the current page as each page will have different row values */
grid-template-rows: 8% 10% 75% 7%;
/* grid-template-rows: 100%;*/
height: 100%;
}
/*
@media screen and (max-height: 600px) {
.grid-container {
grid-template-rows: 12.25% 17.75% 57.75% 12.25%;
}
}
@media screen and (max-height: 400px) {
.grid-container {
grid-template-rows: 21% 20% auto 21%;
}
}
*/
.message-container {
display: block;
height: 100%;
}
.message-container::after {
content: '';
clear: both;
display: table;
}
/*
.header {
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
box-shadow: 0px 2px 5px 0.25px grey;
z-index: 2;
position: relative;
}
*/
.msg-page {
max-width: 100%;
height: 100%;
z-index: 1;
}
.messages {
width: 100%;
height: 100%;
z-index: 1;
overflow-y: scroll;
}
.msg {
padding: 10px 15px 10px 15px;
color: white;
}
.msg::after {
content: ' ';
display: block;
height: 0;
clear: both;
}
.msg .received {
background-color: #00b894;
}
.msg .sent {
background-color: #0984e3;
float: right;
}
.msg > div:first-child {
padding: 10px;
border-radius: 5px;
width: 90%;
}
.msg .msg-body p {
padding: 0px;
margin: 0px;
}
.chats {
padding: 5px 25px 5px 20px;
width: 50%;
display: block;
}
.received-msg {
background-color: lightgray;
}
.sent-msg {
background-color: lightblue;
right: 0px;
}
.footer {
display: flex;
box-shadow: 0px -2px 5px 0.25px grey;
height: 100%;
}
.footer input[type=text] {
width: 85%;
min-height: 100%;
height: 100%;
border: none;
padding: 0px 0px 0px 15px;
font-size: 25px;
}
.footer input[type=text]:focus {
min-height: 100%;
height: 100%;
/* TODO: OUTLINE REMOVAL FROM MOST ELEMENTS ???? */
outline: none;
}
.footer textarea {
resize: none;
border: none;
width: 85%;
height: 100%;
font-size: 5vw;
padding: 15px 0px 0px 15px;
justify-content: center;
}
.footer button{
width: 15%;
min-height: 100%;
height: 100%;
border: none;
background-color: white;
}
将flexbox用于CSS有一段时间也有同样的问题back@RubenMeiring你的意思是用flexbox布局替换网格布局吗？是的，用flexbox替换你的布局，容器所有的东西，普通网格总是给我issues@RubenMeiring我可以问一下flex布局在这方面到底有什么不同吗？似乎应该有一些方法来正确地进行网格布局，这样就不会导致移动输入出现问题。FlexBox就像它的名字所说的那样灵活，网格布局会被挤压和拉伸等。从Porpoint看，FlexBox可以被挤压和拉伸等，但它保持了Porpoint
.grid-container {
display: grid;
/* Might have to change this based on the current page as each page will have different row values */
grid-template-rows: 8% 10% 75% 7%;
/* grid-template-rows: 100%;*/
height: 100%;
}
/*
@media screen and (max-height: 600px) {
.grid-container {
grid-template-rows: 12.25% 17.75% 57.75% 12.25%;
}
}
@media screen and (max-height: 400px) {
.grid-container {
grid-template-rows: 21% 20% auto 21%;
}
}
*/
.message-container {
display: block;
height: 100%;
}
.message-container::after {
content: '';
clear: both;
display: table;
}
/*
.header {
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
box-shadow: 0px 2px 5px 0.25px grey;
z-index: 2;
position: relative;
}
*/
.msg-page {
max-width: 100%;
height: 100%;
z-index: 1;
}
.messages {
width: 100%;
height: 100%;
z-index: 1;
overflow-y: scroll;
}
.msg {
padding: 10px 15px 10px 15px;
color: white;
}
.msg::after {
content: ' ';
display: block;
height: 0;
clear: both;
}
.msg .received {
background-color: #00b894;
}
.msg .sent {
background-color: #0984e3;
float: right;
}
.msg > div:first-child {
padding: 10px;
border-radius: 5px;
width: 90%;
}
.msg .msg-body p {
padding: 0px;
margin: 0px;
}
.chats {
padding: 5px 25px 5px 20px;
width: 50%;
display: block;
}
.received-msg {
background-color: lightgray;
}
.sent-msg {
background-color: lightblue;
right: 0px;
}
.footer {
display: flex;
box-shadow: 0px -2px 5px 0.25px grey;
height: 100%;
}
.footer input[type=text] {
width: 85%;
min-height: 100%;
height: 100%;
border: none;
padding: 0px 0px 0px 15px;
font-size: 25px;
}
.footer input[type=text]:focus {
min-height: 100%;
height: 100%;
/* TODO: OUTLINE REMOVAL FROM MOST ELEMENTS ???? */
outline: none;
}
.footer textarea {
resize: none;
border: none;
width: 85%;
height: 100%;
font-size: 5vw;
padding: 15px 0px 0px 15px;
justify-content: center;
}
.footer button{
width: 15%;
min-height: 100%;
height: 100%;
border: none;
background-color: white;
}