如何让我的网站响应手机？

问题描述 投票：0回答：2

我无法让我的网站在手机上正确显示。它应该是这样的（来自我正在关注的教程）：

不幸的是，这就是我的三星 Galaxy S5 上的样子：

我相信问题出在我的 CSS 上。我正在遵循教程，即使我的代码与讲师的代码匹配，我的网站也不会以相同的方式呈现。不同版本的 Visual Studio Code 会影响这个吗？

这是我的代码：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
    <title>Admin panel</title>
</head>
<body>
    <div class="container">
        <div class="topbar">
            <div class="logo">
                <h2>Pomodone</h2>
            </div>
            <div class="search">
                <input type="text" id="search" placeholder="search here">
                <label for="search"><i class="fas fa-search"></i></label>
            </div>
            <i class="fas fa-bell"></i>
            <div class="user">
                <img src="img/user.png" alt="">
            </div>
        </div>
        <div class="sidebar">
            <ul>
                <li>
                    <a href="#">
                        <i class="fas fa-th-large"></i>
                        <div>Dashboard</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-user-graduate"></i>
                        <div>Students</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chalkboard-teacher"></i>
                        <div>Teachers</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-users"></i>
                        <div>Employees</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chart-bar"></i>
                        <div>Analytics</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-hand-holding-usd"></i>
                        <div>Earnings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-cog"></i>
                        <div>Settings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-question"></i>
                        <div>Help</div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="main">
            <div class="cards">
                <div class="card">
                    <div class="card-content">
                        <div class="number">1217</div>
                        <div class="card-name">Students</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-user-graduate"></i>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="number">42</div>
                        <div class="card-name">Teachers</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-chalkboard-teacher"></i>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="number">68</div>
                        <div class="card-name">Employees</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-users"></i>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="number">$4500</div>
                        <div class="card-name">Earnings</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                </div>
            </div>
            <div class="charts">
                <div class="chart">
                    <h2>Earnings (past 12 months)</h2>
                    <canvas id="lineChart"></canvas>
                </div>
                <div class="chart" id="doughnut-chart">
                    <h2>Employees</h2>
                    <canvas id="doughnut"></canvas>
                </div>
            </div>
        </div>  
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
    <script src="chart.js"></script>
    <script src="chart2.js"></script>
</body>
</html>

CSS

{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}
.topbar{
    position: fixed;
    background: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
    width: 100%;
    height: 60px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 2fr 10fr 0.4fr 1fr;
    align-items: center;
    z-index: 1;
}
.logo h2{
    color: #d34d4d;
}

.search{
    position: relative;
    width: 60%;
    justify-self: center;
}

.search input{
    width: 100%;
    height: 40px;
    padding: 0 40px;
    font-size: 16px;
    outline: none;
    border: none;
    border-radius: 10px;
    background: #f5f5f5;
}

.search >label {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.user{
    position: relative;
    width: 50px;
    height: 50px;
}
.user img{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* sidebar starts here */

.sidebar{
    position: fixed;
    top: 60px;
    width: 260px;
    height: calc(100% - 60px);
    background: #e26666;
    overflow-x: hidden;
}

.sidebar ul {
    margin-top: 20px;
}

.sidebar ul li{
    width: 100%;
    list-style: none;
}
.sidebar ul li:hover{
    background: #fff;
}
.sidebar ul li:hover a{
    color: #e26666;
}

.sidebar ul li a {
    width: 100%;
    text-decoration: none;
    color: rgb(255, 255, 255);
    height: 60px;
    display: flex;
    padding-left: 30px;
    justify-content: flex-start;
    align-items: center
  }
  
.sidebar ul li a i {
    min-width: 60px;
    font-size: 24px;
    text-align: center;
    align-self: flex-start;
}
.sidebar ul li a svg{
    margin-right: 15px;
    width: 25px !important;
}

/* main section starts here*/
.main {
    position: absolute;
    top: 60px;
    width: calc(100% - 260px);
    left: 260px;
    min-height: calc(100vh - 60px);
    background: #f3f3f3;
}
.cards{
    width: 100%;
    padding: 35px 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
}
.cards .card{
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 7px 25px 0 rgb(0, 0, 0, 0.08);
}
.cards .card:hover{
    background: #e26666;
}
.cards .card:hover .number{
    color: #fff;
}

.cards .card:hover .card-name{
    color: #fff;
}

.cards .card:hover .icon-box i{
    color: #fff;
}

.cards .card:hover .icon-box svg{
    color: #fff;
}

.number{
    font-size: 35px;
    font-weight: 500;
    color: #e26666;
}

.card-name{
    color: #888;
    font-weight: 600;
}
.icon-box svg,
.icon-box i {
    font-size: 45px;
    color: #e26666;
}
/* charts starts here */

.charts{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 20px;
    width: 100%;
    padding: 20px;
    padding-top: 0;
}
.chart{
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 7px 25px 0 rgb(0, 0, 0, 0.08);
    width: 100%;
}

.chart h2{
    margin-bottom: 5px;
    font-size: 20px;
    color: #666;
    text-align: center;
}

/* Responsive starts here */
@media (max-width:1115px) {
    .sidebar{
        width: 60px;
    }
    .main{
        left: 60px;
        width: calc(100% - 60px);
    }   
}
@media (max-width:880px) {
    .cards{
        grid-template-columns: repeat(2, 1fr);
    }
    .charts{
        grid-template-columns: 1fr;
    }
    #doughnut-chart{
        padding: 50px;
    }
    #doughnut{
        padding: 50px;
    }
}
@media (max-width:500px){
    .topbar{
        grid-template-columns: 1fr 5fr 0.4fr 1fr;
    }
    .cards{
        grid-template-columns: 1fr;
    }
    .logo h2{
        font-size: 20px;
    }
    .search{
        width: 80%;
    }
    .search input{
        padding: 0 20px;
    }
    .fa-bell{
        margin-right: 5px;
    }
    .user{
        width: 40px;
        height: 40px;
    }
    #doughnut-chart{
       padding: 10px; 
    }
    #doughnut{
        padding: 0;
    }
}

chart.js

折线图

const ctx = document.getElementById('lineChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec',],
        datasets: [{
            label: 'Earnings in $',
            data: [2500,3452,1526,5500,1278,2500,2500,3000,4000,3300,2600,2800],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 3
        }]
    },
    options: {
        responsise: true,
    
    }
});

圆环图

const ctx2 = document.getElementById('doughnut').getContext('2d');
const myChart2 = new Chart(ctx2, {
    type: 'doughnut',
    data: {
        labels: ['Academic', 'Non academic', 'Administration', 'Others'],
        datasets: [{
            label: 'Employees',
            data: [42, 12, 8, 6],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true
    }
});
javascript html css visual-studio-code responsive-design
2个回答
1
投票

这种情况，解决办法是：

  • 在 CSS 中添加 
    canvas { max-width: 100% }
    到 
    /* charts starts here */
    • 内
  • 在 lineChart JS 中将拼写错误 
    responsise: true
    更改为 
    responsive: true

就是这样...经过测试，可以在 Windows Firefox 响应式设计模式下工作到 320x480 尺寸。

带有更正代码的片段

const ctx = document.getElementById('lineChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec',],
        datasets: [{
            label: 'Earnings in $',
            data: [2500,3452,1526,5500,1278,2500,2500,3000,4000,3300,2600,2800],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 3
        }]
    },
    options: {
        responsive: true,
    
    }
});

const ctx2 = document.getElementById('doughnut').getContext('2d');
const myChart2 = new Chart(ctx2, {
    type: 'doughnut',
    data: {
        labels: ['Academic', 'Non academic', 'Administration', 'Others'],
        datasets: [{
            label: 'Employees',
            data: [42, 12, 8, 6],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true
    }
});
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}
.topbar{
    position: fixed;
    background: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
    width: 100%;
    height: 60px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 2fr 10fr 0.4fr 1fr;
    align-items: center;
    z-index: 1;
}
.logo h2{
    color: #d34d4d;
}

.search{
    position: relative;
    width: 60%;
    justify-self: center;
}

.search input{
    width: 100%;
    height: 40px;
    padding: 0 40px;
    font-size: 16px;
    outline: none;
    border: none;
    border-radius: 10px;
    background: #f5f5f5;
}

.search >label {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.user{
    position: relative;
    width: 50px;
    height: 50px;
}
.user img{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* sidebar starts here */

.sidebar{
    position: fixed;
    top: 60px;
    width: 260px;
    height: calc(100% - 60px);
    background: #e26666;
    overflow-x: hidden;
}

.sidebar ul {
    margin-top: 20px;
}

.sidebar ul li{
    width: 100%;
    list-style: none;
}
.sidebar ul li:hover{
    background: #fff;
}
.sidebar ul li:hover a{
    color: #e26666;
}

.sidebar ul li a {
    width: 100%;
    text-decoration: none;
    color: rgb(255, 255, 255);
    height: 60px;
    display: flex;
    padding-left: 30px;
    justify-content: flex-start;
    align-items: center
  }
  
.sidebar ul li a i {
    min-width: 60px;
    font-size: 24px;
    text-align: center;
    align-self: flex-start;
}
.sidebar ul li a svg{
    margin-right: 15px;
    width: 25px !important;
}

/* main section starts here*/
.main {
    position: absolute;
    top: 60px;
    width: calc(100% - 260px);
    left: 260px;
    min-height: calc(100vh - 60px);
    background: #f3f3f3;
}
.cards{
    width: 100%;
    padding: 35px 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
}
.cards .card{
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 7px 25px 0 rgb(0, 0, 0, 0.08);
}
.cards .card:hover{
    background: #e26666;
}
.cards .card:hover .number{
    color: #fff;
}

.cards .card:hover .card-name{
    color: #fff;
}

.cards .card:hover .icon-box i{
    color: #fff;
}

.cards .card:hover .icon-box svg{
    color: #fff;
}

.number{
    font-size: 35px;
    font-weight: 500;
    color: #e26666;
}

.card-name{
    color: #888;
    font-weight: 600;
}
.icon-box svg,
.icon-box i {
    font-size: 45px;
    color: #e26666;
}
/* charts starts here */

.charts{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 20px;
    width: 100%;
    padding: 20px;
    padding-top: 0;
}
.chart{
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 7px 25px 0 rgb(0, 0, 0, 0.08);
    width: 100%;
}

.chart h2{
    margin-bottom: 5px;
    font-size: 20px;
    color: #666;
    text-align: center;
}

canvas { max-width: 100% }

/* Responsive starts here */
@media (max-width:1115px) {
    .sidebar{
        width: 60px;
    }
    .main{
        left: 60px;
        width: calc(100% - 60px);
    }   
}
@media (max-width:880px) {
    .cards{
        grid-template-columns: repeat(2, 1fr);
    }
    .charts{
        grid-template-columns: 1fr;
    }
    #doughnut-chart{
        padding: 50px;
    }
    #doughnut{
        padding: 50px;
    }
}
@media (max-width:500px){
    .topbar{
        grid-template-columns: 1fr 5fr 0.4fr 1fr;
    }
    .cards{
        grid-template-columns: 1fr;
    }
    .logo h2{
        font-size: 20px;
    }
    .search{
        width: 80%;
    }
    .search input{
        padding: 0 20px;
    }
    .fa-bell{
        margin-right: 5px;
    }
    .user{
        width: 40px;
        height: 40px;
    }
    #doughnut-chart{
       padding: 10px; 
    }
    #doughnut{
        padding: 0;
    }
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
    <div class="container">
        <div class="topbar">
            <div class="logo">
                <h2>Pomodone</h2>
            </div>
            <div class="search">
                <input type="text" id="search" placeholder="search here">
                <label for="search"><i class="fas fa-search"></i></label>
            </div>
            <i class="fas fa-bell"></i>
            <div class="user">
                <img src="img/user.png" alt="">
            </div>
        </div>
        <div class="sidebar">
            <ul>
                <li>
                    <a href="#">
                        <i class="fas fa-th-large"></i>
                        <div>Dashboard</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-user-graduate"></i>
                        <div>Students</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chalkboard-teacher"></i>
                        <div>Teachers</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-users"></i>
                        <div>Employees</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chart-bar"></i>
                        <div>Analytics</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-hand-holding-usd"></i>
                        <div>Earnings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-cog"></i>
                        <div>Settings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-question"></i>
                        <div>Help</div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="main">
            <div class="cards">
                <div class="card">
                    <div class="card-content">
                        <div class="number">1217</div>
                        <div class="card-name">Students</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-user-graduate"></i>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="number">42</div>
                        <div class="card-name">Teachers</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-chalkboard-teacher"></i>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="number">68</div>
                        <div class="card-name">Employees</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-users"></i>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="number">$4500</div>
                        <div class="card-name">Earnings</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                </div>
            </div>
            <div class="charts">
                <div class="chart">
                    <h2>Earnings (past 12 months)</h2>
                    <canvas id="lineChart"></canvas>
                </div>
                <div class="chart" id="doughnut-chart">
                    <h2>Employees</h2>
                    <canvas id="doughnut"></canvas>
                </div>
            </div>
        </div>  
    </div>

1
投票

解决方案

为了使上面的代码具有响应能力，我做了两件事。

1.在 CSS 中

我将父级 

display
的 
.charts
设置为 
block
并给 
.chart
画布容器 
margin-bottom
20px（考虑到网格间隙不起作用）。

所以在

style.css
第207行附近的某个地方我改变了

.charts {
  grid-template-columns: 1fr;
}

到

.charts {
  /* grid-template-columns: 1fr; */
  display: block;
}
.chart {
  margin-bottom: 20px;
}

2.在 JavaScript 中

我将整个图表设置代码包装在一个 

drawChart
函数中，每次调整窗口大小时都会调用它。如果图表已存在，则首先将其销毁，以防止出现任何错误。我将您的 JavaScript 代码更改为以下内容。

let myChart;
let myChart2;

const drawCharts = () => {
  if (myChart) {
    myChart.destroy();
  }
  const ctx = document.getElementById('lineChart').getContext('2d');
  myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',],
      datasets: [{
        label: 'Earnings in $',
        data: [2500, 3452, 1526, 5500, 1278, 2500, 2500, 3000, 4000, 3300, 2600, 2800],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 3
      }]
    },
    options: {
      responsise: true,
    
    }
  });

  if (myChart2) {
    myChart2.destroy();
  }
  const ctx2 = document.getElementById('doughnut').getContext('2d');
  myChart2 = new Chart(ctx2, {
    type: 'doughnut',
    data: {
      labels: ['Academic', 'Non academic', 'Administration', 'Others'],
      datasets: [{
        label: 'Employees',
        data: [42, 12, 8, 6],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      responsive: true
    }
  });
};

drawCharts();

window.onresize = drawCharts;

说明

正如 @AHaworth 在评论中指出的那样，我大量使用了 Chrome DevTools 来查找可能的障碍。

我觉得 

display: grid;
在较小的屏幕上是不必要的，因此将上级父级 
.charts
更改为 
display: block;
。

我还认为，chart.js 将根据当前父级大小计算图表的大小。所以如果窗口大小调整了，就需要重建图表，这就是设置回调的原因。

因此，请务必进行这些更改并检查它是否能按您想要的方式工作。

我无法解释为什么在不进行上述更改的情况下，代码对 YouTube 用户来说效果很好。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.