如何使此页面在iPhone上更具响应性？
[英]how to make it more responsive this page specially on iphone?
问题描述
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"> <title>bootstrap</title> <style> .mx-3 {margin-right: 3rem !important;margin-left: 3rem !important; } .my-3 {margin-top: 3rem !important;margin-bottom: 3rem !important; } .pl-3 {padding-left: 3rem !important; } .pr-3 {padding-right: 3rem !important; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="panel panel-default no-bg ba-2 b-gray-dark"> <div class="panel-body mx-3 my-3"> <div class="row"> <div class="col-xs-12"> <div class="row"> <div class="col-xs-12"> <div class="col-xs-8"> <p>To:</p> </div> <div class="col-xs-2" style="text-align:right"> <p>Number:</p> </div> <div class="col-xs-2" style="text-align:right"> <p>QT-10001</p> </div> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="col-xs-8"> <p>Jefferey Halvorson </p> </div> <div class="col-xs-2" style="text-align:right"> <p>Issue Date:</p> </div> <div class="col-xs-2" style="text-align:right"> <p>15-Mar-2017</p> </div> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="col-xs-8"> <p>Herzog-Willms </p> </div> <div class="col-xs-2" style="text-align:right"> <p> Expiry Date:</p> </div> <div class="col-xs-2" style="text-align:right"> <p>15-Mar-2017</p> </div> </div></div> <div class="row"> <div class="col-xs-12"> <div class="col-xs-8"> <p>309 Johnson Ford</p> </div> <div class="col-xs-2" style="text-align:right"> <p>Grand Total:</p> </div> <div class="col-xs-2" style="text-align:right"> <p>USD 1,469.00</p> </div> </div></div> <div class="row"> <div class="col-xs-12"> <div class="col-xs-8"> <p>Cormiertown, AL 23471-0332</p> </div> <div class="col-xs-2" style="text-align:right"> <p>Status:</p> </div> <div class="col-xs-2" style="text-align:right"> <p>SENT</p> </div> </div></div> <div class="row"> <div class="col-xs-12"> <div class="col-xs-8"> <p>GSTIN: C-66553</p> </div> </div></div> </div> </div> <!-- Table --> <div class="row"> <div class="col-xs-12 pl-3 pr-3"> <table class="table table-condensed"> <thead> <tr> <th>Item Code</th> <th>Description</th> <th>UOM</th> <th>Unit Price</th> <th>Qty</th> <th>Total</th> </tr> </thead> <tbody> <tr> <td>P-203</td> <td>HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A) HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)</td> <td>set</td> <td>275.00</td> <td>4</td> <td>1,100.00</td> </tr> <tr> <td>P-203</td> <td>HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A) HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)</td> <td>set</td> <td>275.00</td> <td>4</td> <td>1,100.00</td> </tr> <tr> <td>P-203</td> <td>HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A) HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)</td> <td>set</td> <td>275.00</td> <td>4</td> <td>1,100.00</td> </tr> <tr> <td>P-203</td> <td>HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A) HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)</td> <td>set</td> <td>275.00</td> <td>4</td> <td>1,100.00</td> </tr> <tr> <td>P-203</td> <td>HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A) HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)</td> <td>set</td> <td>275.00</td> <td>4</td> <td>1,100.00</td> </tr> <tr> <td colspan="3" style="border:0"> <td style="border:0; text-align:right;">Sub Total:</td> <td colspan="1" style="border:0"></td> <td style="border:0;text-align:right;">1,100.00</td> </tr> <tr> <td colspan="3" style="border:0"> <td style="border:0; text-align:right;">CGST</td> <td colspan="1" style="border:0"></td> <td style="border:0;text-align:right;">10,916.00</td> </tr> <tr> <td colspan="3" style="border:0"> <td style="border:0; text-align:right;">SGST</td> <td colspan="1" style="border:0"></td> <td style="border:0;text-align:right;">28476447</td> </tr> <tr> <td colspan="3" style="border:0"> <td style="border:0; text-align:right;">Grand Total:</td> <td colspan="1" style="border:0"></td> <td style="border:0;text-align:right;">USD 10,776.00</td> </tr> </tbody> <tfoot> <tr> <td colspan="4" style="border: 0;"><strong>Terms and Conditions:</strong></td> </tr> <tr> <td colspan="4" style="border: 0;">1. Delivery will be made within [DAYS] days following [COMPANY NAME] receipt of payment.</td> </tr> <tr> <td colspan="4"style="border: 0;">2. Delivery will be made fob [COMPANY NAME] facility.</td> </tr> <tr> <td colspan="4" style="border: 0;">3. The general terms and conditions of purchase at [WEBSITE LINK OR REFERENCE TO ATTACHMENT] apply to this quotation contract.</td> </tr> </tfoot> <!-- END Table --> </table> </div> </div> </div> <!-- </div> --> </div> </div> </div> </body> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script> </body> </html>
我从2天开始在此页面上进行工作，以使其具有响应性。 现在在chrome中，我正在使用检查工具检查此页面的响应。 除使用chrome inspect工具的iphone以外，此页面的响应度在所有设备上都很好。 现在我对页面的响应能力感到困惑。我使用了一个表元素，并为内容编写了bootstrap列和行。 我把所有这些都放在panel 。
现在我的问题是： -如何使此页面得到更多响应？
1 个解决方案
解决方案1
1 已采纳 2018-07-31 05:51:58
好吧，您正在使用表格，表格有一个限制，可以在“移动视图”中进行调整。 您可能的解决方案可能是：
- 隐藏内容
- 创建水平滚动
两者都难以维护。 因此，我们需要在Mobile中调整表格本身的布局本身。 这是一个解决方案，其中我更改了表的结构，仅在移动设备中使用CSS更改了表的结构，以更易读的形式显示数据。 演示可在https://jsfiddle.net/8vnkuocb/10/获得
<div class="container">
<table class="table table-condensed" style="padding:20px;">
<thead>
<tr>
<th>Item Code</th>
<th>Description</th>
<th>U.O.M</th>
<th>Unit Price</th>
<th>Qty</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Item Code">P-203</td>
<td data-title="Description">HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A) HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)</td>
<td data-title="U.O.M">set</td>
<td data-title="Unit Price">275.00</td>
<td data-title="Qty">4</td>
<td data-title="Total">1,100.00</td>
</tr>
<tr>
<td data-title="Item Code">P-203</td>
<td data-title="Description">HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A) HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)</td>
<td data-title="U.O.M">set</td>
<td data-title="Unit Price">275.00</td>
<td data-title="Qty">4</td>
<td data-title="Total">1,100.00</td>
</tr>
<tr>
<td data-title="Item Code">P-203</td>
<td data-title="Description">HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A) HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)</td>
<td data-title="U.O.M">set</td>
<td data-title="Unit Price">275.00</td>
<td data-title="Qty">4</td>
<td data-title="Total">1,100.00</td>
</tr>
<tr>
<td data-title="Item Code">P-203</td>
<td data-title="Description">HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A) HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)</td>
<td data-title="U.O.M">set</td>
<td data-title="Unit Price">275.00</td>
<td data-title="Qty">4</td>
<td data-title="Total">1,100.00</td>
</tr>
<tr>
<td>P-203</td>
<td>HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A) HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)</td>
<td>set</td>
<td>275.00</td>
<td>4</td>
<td>1,100.00</td>
</tr>
<tr>
<td colspan="3" style="border:0">
</td>
<td style="border:0; text-align:right;">Sub Total:</td>
<td colspan="1" style="border:0"></td>
<td style="border:0;text-align:right;">1,100.00</td>
</tr>
<tr>
<td colspan="3" style="border:0">
</td>
<td style="border:0; text-align:right;">CGST</td>
<td colspan="1" style="border:0"></td>
<td style="border:0;text-align:right;">10,916.00</td>
</tr>
<tr>
<td colspan="3" style="border:0">
</td>
<td style="border:0; text-align:right;">SGST</td>
<td colspan="1" style="border:0"></td>
<td style="border:0;text-align:right;">28476447</td>
</tr>
<tr>
<td colspan="3" style="border:0">
</td>
<td style="border:0; text-align:right;">Grand Total:</td>
<td colspan="1" style="border:0"></td>
<td style="border:0;text-align:right;">USD 10,776.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" style="border: 0;"><strong>Terms and Conditions:</strong></td>
</tr>
<tr>
<td colspan="4" style="border: 0;">1. Delivery will be made within [DAYS] days following [COMPANY NAME] receipt of payment.</td>
</tr>
<tr>
<td colspan="4" style="border: 0;">2. Delivery will be made f.o.b. [COMPANY NAME] facility.</td>
</tr>
<tr>
<td colspan="4" style="border: 0;">3. The general terms and conditions of purchase at [WEBSITE LINK OR REFERENCE TO ATTACHMENT] apply to this quotation contract.</td>
</tr>
</tfoot>
<!-- END Table -->
</table>
@media (max-width: 767px) {
table, thead, tbody, th,td,tr {
display: block;
}
.table-condensed {
border : 0 none;
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tbody tr {
border: 1px solid #ccc;
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 25% !important;
white-space: normal;
text-align:left;
&:first-child {
padding-left:0px;
}
&:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 20%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: 600;
content: attr(data-title);
}
&.sortRowActive {
background-color: #ddd;
}
}
&.selected-user {
td {
background-color: #ffc !important;
}
}
}
}
}
注意：以上结构将在768像素（Ipad肖像）以下应用，您可以根据需要进行修改。
如何使简单的HTML页面更具响应性？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.