为什么我的网站在 iPhone 上加载时出现错误，即使它在 Android 上运行良好？

Question

我使用react开发了一个计算器，它在我的电脑上运行良好，所以我将其上传到github页面。我两个朋友的手机上的页面工作正常，他们使用的是 android，但由于某种原因，在我的 iphone 上它看起来有问题。

这是我的 .html 文件

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <link rel="icon" href="./src/assets/171352_calculator_icon2.png"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

这是我的 .css 文件。我正在使用 vite 和 React，所以我不确定我是否做对了，但它可以在 Android 手机上运行。我把它发送给 4 个不同的朋友，他们有 Android 和 2 个 iPhone，只有 iPhone 被窃听了。

#calculator{
    margin: auto;
    margin-top: 100px;
    overflow: hidden;
    background-color: #1C1C1C;
    max-width: 400px;
    border-radius: 10px;
}

#keys{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 20px;
    margin-bottom: -10px;
}

#display{
    margin-left: 25px;
    margin-right: 20px;
    background-color: #1C1C1C;
    color:white;
    border: none;
    width: 340px;
    height: 70px;
    margin-bottom: px;
    margin-top: 20px;
    padding-bottom: 0px;
    text-align: end;
    font-size: 70px;

}

#keys-after-zero{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding-left: 20px;
    margin-bottom: 20px;
}

#zero-button{
    border-radius: 80px;
    width: 179px;
    text-align: start;
    padding-left: 34px;
}

button{
    background-color: hsl(0, 0%, 31%);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    border: none;
    cursor: pointer;
    color: white;
    font-size: 35px;
}

button:active {
    background-color: hsl(0, 0%, 41%);
}

.orange{
    background-color: hsl(35, 100%, 50%);
}

.orange:active{
    background-color: hsl(35, 100%, 40%);
}

.light-gray{
    color: #1C1C1C;
    background-color: hsl(60, 2%, 63%);
}

.light-gray:active{
    background-color: hsl(60, 2%, 53%);
}


@media screen and (max-width: 600px){
    #calculator{
        max-width: 280px;
    }

    button{
        width: 50px;
        height: 50px;
        font-size: 27px;
        -webkit-appearance: none;
        appearance: none;
    }

    #zero-button{
        width: 118px;
        padding-left: 34px;
    }

    #display {
        width: 225px;
        font-size: 55px;
        height: 60px;
    }
}

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
    #calculator{
        max-width: 280px;
    }

    button{
        width: 50px;
        height: 50px;
        font-size: 27px;
    }

    #zero-button{
        width: 118px;
        padding-left: 34px;
    }

    #display {
        width: 225px;
        font-size: 55px;
        height: 60px;
    }
}

我尝试更改css文件，并且我已经在css中做了一个@media以在手机中有所不同，并尝试添加-webkit-appearance：none;，但它不起作用

如果有人想打开该网站并查看其外观，请点击以下链接：https://edd-estevam.github.io/Calculator-react/

存储库已更新为我所做的最新更改：https://github.com/Edd-Estevam/Calculator-react

我尝试在互联网上找到的CSS中添加一些行，例如@media (device-height: 568px) 和 (-webkit-min-device-pixel-ratio: 2){}，但它不起作用.

Answer 1

1。供应商前缀：

虽然
```
-webkit-appearance: none;
```
有时可以解决 iPhone 上的按钮样式问题，但不能保证，将来可能会被弃用。
考虑使用更现代的方法：

button {
  -webkit-appearance: button; /* Reset default iOS button styles */
  appearance: button;
}

2。 Flexbox 与网格布局：

iPhone 的网格布局渲染方式可能与 Android 设备不同。如果问题与布局相关，请尝试将按钮容器切换到 Flexbox：

#keys {
  display: flex; /* Change to flexbox */
  flex-wrap: wrap;
  justify-content: space-between; /* Distribute buttons evenly */
  gap: 10px;
  padding: 20px;
  margin-bottom: -10px;
}

3.特异性和继承性：

确保您的 iPhone 特定样式比默认样式具有更高的特异性。您可以使用更具体的选择器或
```
!important
```
标志（谨慎使用）：
```
@media screen and (max-width: 600px) {
  #calculator {
    max-width: 280px !important; /* Use !important sparingly */
  }
}
```

为什么我的网站在 iPhone 上加载时出现错误，即使它在 Android 上运行良好？

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

1个回答

最新问题

为什么我的网站在 iPhone 上加载时出现错误，即使它在 Android 上运行良好？

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

1个回答

最新问题

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