css - 手机、平板电脑中的应用程序样式问题

Question

我正在使用 Angular 4 并构建一个应用程序。它工作正常，但当我在移动设备上运行时出现问题。整个风格发生了变化并分发了整个应用程序。我担心我必须做什么。任何帮助将不胜感激

Answer 1

在表格前取 Div 并应用 div 样式 width: 100%; overflow: auto;

.demo {
    width: 100%;
    overflow: auto;
}
.demo::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    border-radius: 10px;
    background-color: #d9d9d9;
}
.demo::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #5f6566;
}
.demo::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #d9d9d9;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    
    
<div class="demo">
    <table class="table">
        <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
            <th>Lastname</th>
            <th>Lastname</th>
            <th>Lastname</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>John</td>
            <td>John</td>
            <td>Doe</td>
            <td>Doe</td>
            <td>john@example.com</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>John</td>
            <td>John</td>
            <td>Doe</td>
            <td>Doe</td>
            <td>john@example.com</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>John</td>
            <td>John</td>
            <td>Doe</td>
            <td>Doe</td>
            <td>john@example.com</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>John</td>
            <td>John</td>
            <td>Doe</td>
            <td>Doe</td>
            <td>john@example.com</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>John</td>
            <td>John</td>
            <td>Doe</td>
            <td>Doe</td>
            <td>john@example.com</td>
            <td>john@example.com</td>
        </tr>
        </tbody>
    </table>
</div>