我一直在开发一个大型的单页应用程序，该应用程序将在本地局域网上运行-即不向公众开放。那必须支持Chrome浏览器和iPad。
[我在Chrome上有很多工作，但是在下面的部分中遇到了iPad的问题（此完整的应用是由网络组件组成的-我试图制作一个相当小的测试用例。
在此情况下-在Chrome（78）中，两个日期输入字段位于-第二个季度中“菜单卡”的顶部-下方，该字段是4 x 4网格中的16个按钮。
问题是-Safari中的同一页面（在我的Mac（v13.0.3）和iPad上-运行IOS 13.1.3）显示网格的所有组件。 Mac和iPad之间的差别很小。在后者上，日期字段似乎实际上比其他字段高，而在Mac上，日期字段完全隐藏。
我已经搜索了chrome和safari之间的差异，但找不到任何差异。
我是否弄错了CSS的语法？然后Chrome接受它，而Safari不接受？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>Grid Issue</title>
<base href="/concepts/">
<link rel="shortcut icon" sizes="32x32" href="../images/pas-icon-32.png">
<style>
html {
background: #ffffff;
}
body {
margin: 0;
min-height: 100vh;
font-family: sans-serif;
line-height: 1.5;
letter-spacing: 0.1em;
background-color: #fafafa;
color: #333;
}
</style>
</head>
<body>
<style>
:root {
--pas-button-menu-height: 70px;
--pas-button-menu-width: 225px;
}
.menu-card {
grid-template-rows: auto repeat(auto-fit, minmax(var(--pas-menu-button-height), max-content));
}
.three {
grid-template-columns: repeat(4,var(--pas-menu-button-width));
grid-template-areas:
". selector . ."
"covstat covstatnotx surgstat treat"
"enqstats embassy notreat surgpay"
"surgnopre prebook pricebreak bookstats"
"bookfirst bookclinic bookappt bookdet";
}
.selectors {
display: flex;
flex-direction: column;
}
.three .selectors {
grid-area: selector;
}
#covstat_portrait {
grid-area: covstat;
}
#covstatnotx_portrait {
grid-area: covstatnotx;
}
#surgstat_portrait {
grid-area:surgstat;
}
#treat {
grid-area: treat;
}
#enqstats {
grid-area: enqstats;
}
#embassy {
grid-area: embassy;
}
#notreat {
grid-area: notreat;
}
#surgpay {
grid-area: surgpay
}
#surgnopre {
grid-area: surgnopre;
}
#prebook {
grid-area: prebook;
}
#pricebreak {
grid-area: pricebreak;
}
#bookstats {
grid-area: bookstats;
}
#bookfirst {
grid-area: bookfirst;
}
#bookclinic {
grid-area: bookclinic;
}
#bookappt {
grid-area: bookappt;
}
#bookdet {
grid-area: bookdet;
}
section.menu-container {
display: flex;
flex-direction: column;
align-items: center;
}
section.menu-container > .menu-card {
margin: 40px 0 20px 0;
border-radius: 10px;
padding: 20px;
box-shadow: 0px 0px 38px -2px rgba(0,0,0,0.5);
background-color: white;
display: grid;
grid-gap: 30px;
}
</style>
<section class="menu-container">
<div class="menu-card three">
<div class="selectors">
<input id="startdate" type="date" label="Start Date" .value="1/11/2019"></input>
<input id="enddate" type="date"label="End Date" .value="30/11/2019" ></input>
</div>
<button id="covstat_portrait" >Conversion Statistics</button>
<button id="covstatnotx_portrait">Conversion Statistics (inc No Tx)</button>
<button id="surgstat_portrait">Surgery Statistics</button>
<button id="treat" >Treatments By Surgeon/Clinic</button>
<button id="enqstats">Enquiry and New Patient Stats</button>
<button id="embassy">Special Embassy Patients</button>
<button id="notreat">No Treatment/Not Suitable By Clinic</button>
<button id="bookclinic">Bookings By Clinic</button>
<button id="bookstats">Bookings Summary</button>
<button id="surgnopre">Surgery Booked with no Pre Op Assess done</button>
<button id="prebook">Pre Op Booking Analysis</button>
<button id="bookfirst">Bookings By Date First Booked</button>
<button id="bookappt">Bookings By Appointment Date</button>
<button id="bookdet">Booking By Appointment Date (Detail)</button>
<button id="pricebreak">Price Break Analysis</button>
<button id="surgpay">Surgeon Payments</button>
</div>
</section>
</body>
</html>
我偶然遇到了这个解决方案。似乎有效
在我的HTML中，<metadata name="viewport" ...我应该添加shrink-to-fit=no
整个事情变成了
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
我在本文https://bitsofco.de/ios-safari-and-shrink-to-fit/中找到了解决方案