Html iPhone SE未正确显示响应表标题,但在Android上工作
我借用了和的代码,它们在我的iPhone SE上正常工作,如屏幕截图所示 我使用golang的模板修改了代码以实现http服务器,它在桌面和chrome模拟移动屏幕上正确显示了响应表 但不是在我身上 这是我的密码Html iPhone SE未正确显示响应表标题,但在Android上工作,html,ios,css,responsive,Html,Ios,Css,Responsive,我借用了和的代码,它们在我的iPhone SE上正常工作,如屏幕截图所示 我使用golang的模板修改了代码以实现http服务器,它在桌面和chrome模拟移动屏幕上正确显示了响应表 但不是在我身上 这是我的密码 <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <style> body {
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<style>
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) and (device-width : 320px) and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/
{
/*IPhone 5 only CSS here*/
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
@media screen and (max-width: 500px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
</style>
</head>
<body style="background: rgb(29, 29, 29)">
<table>
<caption>Statement Summary</caption>
<thead>
<tr>
<th scope="col">Account</th>
<th scope="col">Due Date</th>
<th scope="col">Amount</th>
<th scope="col">Period</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Account">Visa - 3412</td>
<td data-label="Due Date">04/01/2016</td>
<td data-label="Amount">$1,190</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
<tr>
<td scope="row" data-label="Account">Visa - 6076</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$2,443</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
</tr>
<tr>
<td scope="row" data-label="Account">Corporate AMEX</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$1,181</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
</tr>
<tr>
<td scope="row" data-label="Acount">Visa - 3412</td>
<td data-label="Due Date">02/01/2016</td>
<td data-label="Amount">$842</td>
<td data-label="Period">01/01/2016 - 01/31/2016</td>
</tr>
</tbody>
</table>
</body>
身体{
字体系列:“开放式Sans”,无衬线;
线高:1.25;
}
桌子{
边框:1px实心#ccc;
边界塌陷:塌陷;
保证金:0;
填充:0;
宽度:100%;
表布局:固定;
}
表格标题{
字号:1.5em;
边缘:.5em 0.75em;
}
表tr{
背景色:#F8;
边框:1px实心#ddd;
填充:.35em;
}
表th,
表td{
填充:625em;
文本对齐:居中;
}
表th{
字体大小:.85em;
字母间距:.1米;
文本转换:大写;
}
/*iPhone 5视网膜,不考虑IOS版本*/
@介质(设备高度:568px)和(设备宽度:320px)以及(-webkit最小设备像素比:2)
/*和(方向:todo:您可以添加方向或删除此注释)*/
{
/*这里只有iphone5的CSS*/
桌子{
边界:0;
}
表格标题{
字体大小:1.3em;
}
餐桌{
边界:无;
剪辑:rect(0);
高度:1px;
保证金:-1px;
溢出:隐藏;
填充:0;
位置:绝对位置;
宽度:1px;
}
表tr{
边框底部:3px实心#ddd;
显示:块;
边缘底部:.625em;
}
表td{
边框底部:1px实心#ddd;
显示:块;
字体大小:.8em;
文本对齐:右对齐;
}
表td::之前{
内容:attr(数据标签);
浮动:左;
字体大小:粗体;
文本转换:大写;
}
表td:最后一个孩子{
边界底部:0;
}
}
@媒体屏幕和屏幕(最大宽度:500px){
桌子{
边界:0;
}
表格标题{
字体大小:1.3em;
}
餐桌{
边界:无;
剪辑:rect(0);
高度:1px;
保证金:-1px;
溢出:隐藏;
填充:0;
位置:绝对位置;
宽度:1px;
}
表tr{
边框底部:3px实心#ddd;
显示:块;
边缘底部:.625em;
}
表td{
边框底部:1px实心#ddd;
显示:块;
字体大小:.8em;
文本对齐:右对齐;
}
表td::之前{
内容:attr(数据标签);
浮动:左;
字体大小:粗体;
文本转换:大写;
}
表td:最后一个孩子{
边界底部:0;
}
}
报表摘要
账户
到期日
数量
时期
签证-3412
04/01/2016
$1,190
03/01/2016 - 03/31/2016
签证-6076
03/01/2016
$2,443
02/01/2016 - 02/29/2016
美国运通公司
03/01/2016
$1,181
02/01/2016 - 02/29/2016
签证-3412
02/01/2016
$842
01/01/2016 - 01/31/2016
我已经阅读并使用谷歌找到了解决方案,但什么也没找到
因此,我们非常感谢您的帮助
*@media (device-height : 568px) and (device-width : 320px) and (-webkit-min-device-pixel-ratio: 2)*
问题是设备高度,真正的iphone se的设备高度应该小于568px,因为它不包括safari的页眉或页脚对不起,不起作用。我的SE告诉我高度的值是491,我应该在媒体设备高度中使用什么值?更改为最小设备高度:200px看看是否有change@media(最小设备高度:200px)和(设备宽度:320px)以及(-webkit最小设备像素比:2),但没有任何变化。您可以检查我发布的图片,表格标题显示不正确,并且位于错误的位置。我已使用i8plus进行检查,设备的大小小于414px,因此。。。更改代码。