Question

我正在设计一个适用于桌面和移动浏览器的自适应html模板。在内容中，我有一个固定的表，它使用媒体查询缩小其字体大小（标题和单元格），直到达到某个限制。在该限制之下，该表太密集，无法以该字体大小读取，因此即使它在移动设备中可见部分之外，我们也希望保留它。

对于大多数手机和桌面而言，这不是问题，因为内容与中心对齐，并且有一个水平滚动条，用于查看视口外部的表格部分。

但iPhone上的Safari会尝试将所有内容放在可见区域，实际上是在左侧移动内容并在右侧留下一个大的空白区域，只是为了适应桌面。

在下图中，橙色矩形表示视口，绿色表示内容，“Div”矩形表示视口内部不适合。请注意，在左侧的图像上，Div的超出部分是不可见的（我对这个解决方案没问题）。 enter image description here

如何在css中始终获得左侧图像的结果？

这些是html的相关部分：

<body>
    <div class="container">
        <div class="row section">
            <div class="col content">
                <table width="100%">
                    <tbody>
                        <tr>
                            <td rowspan="2">
                                <div align="center" class="Style1">
                                    title
                                </div>
                            </td>
                            <!-- Many Other <td></td> HERE -->
                        </tr>
                        <!-- Many Other <tr></tr> HERE -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

和Css：

/*Grid System*/
.col {
    padding: 0 1.5em;
}
.row .row {
    margin: 0 -1.5em;
}
.row:before, .row:after {
    content: "";
    display: table;
}
.row:after {
    clear: both;
}
@media only screen {
    .col {
        float: left;
        width: 100%;

        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
}


/* Mobile really small dispalys */
@media only screen and (min-width: 2em) {

    table {
        font-size: 0.4em;
    }

}

/*Mobile normal diaplay*/
@media only screen and (min-width: 12em) {

    p, ul {
        font-size: 0.875em;
    }

    table {
        font-size: 0.7em;
    }

    .feature:first-child,
    .info:first-child {
        border-right: 1px dotted #aaa;
    }

    .container {
        padding: 1em;
    }

    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.625em;
    }

}

/*Tablets*/
@media only screen and (min-width: 54em) {
    .content {
        border: none;
        margin-bottom: 0;
        /*border-left: 1px dotted #aaa;*/
    }

    .info:first-child {
        border: none;
    }

    h1 {
        font-size: 2.5em;
    }

    h2 {
        font-size: 1.8em;
    }
}

/*Desktop*/
@media only screen and (min-width: 76em) {
    .info:first-child {
        border-right: 1px dotted #aaa;
    }

    h1 {
        font-size: 3em;
    }

    h2 {
        font-size: 2em;
    }
}

/* General styles*/
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
}

.container {
    margin: 0 auto;
    max-width: 90em;
    padding: 1em 0;
}

.row.section {
    margin-bottom: 4em;
}

.content {
    margin-bottom: 1.5em;
}

Answer 1

您可能需要将min-width设置为元素

Answer 2

设置：

就足够了

.container {
    overflow: auto;
}

水平ScrollBar

2 个答案: