Html Question posted in
Some basic documentation can be found here.

Html – Why does my website load bugged on iphones, even tho it works fine on androids?

I developed a calculator using react and it works fine on my pc, so i uploaded it to github pages. The page in my both friend’s phone works fine, and they use android, but for some reason on my iphone it looks bugged.
the webpage on my iphone

Here is my .html file

<!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>

And here is my .css file. I am using vite and react, so i am not sure if i made it right, but it worked on android phones. I send it to 4 differents friends with android and 2 iphones, and only the iphones were bugged.

#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;
    }
}

I tried change the css file, and i already made an @media in css to be different in cellphones and tried to add -webkit-appearance: none;, but it didn’t work

If anyone wants to open the site and see how it looks, here is the link: https://edd-estevam.github.io/Calculator-react/

The repository is updated with the latest changes that i made: https://github.com/Edd-Estevam/Calculator-react

I tried to add some lines in css that i found in the internet, like @media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2){}, but it didn’t work.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Well, i solved the problem. It was just the font size, so if you have the same problem that i did, you just need to decrease it to the point its not overflowing anymore.


  2. 0

    1. Vendor Prefixes:

    • While -webkit-appearance: none; can sometimes address button styling issues on iPhones, it’s not guaranteed and might be deprecated in the future.
    • Consider using a more modern approach:
    button {
  -webkit-appearance: button; /* Reset default iOS button styles */
  appearance: button;
}

    2. Flexbox vs. Grid Layout:

    • iPhones might render grid layout differently than Android devices. If the issue is layout-related, experiment with switching to flexbox for the button container:
    #keys {
  display: flex; /* Change to flexbox */
  flex-wrap: wrap;
  justify-content: space-between; /* Distribute buttons evenly */
  gap: 10px;
  padding: 20px;
  margin-bottom: -10px;
}

    3. Specificity and Inheritance:

    • Ensure your iPhone-specific styles have higher specificity than the default styles. You can use more specific selectors or the !important flag (use with caution):

      @media screen and (max-width: 600px) {
  #calculator {
    max-width: 280px !important; /* Use !important sparingly */
  }
}
    Login or Signup to reply.
  3. 0

    As other answers has already mentioned. You are using plain CSS to render your application. Usually, if you use something like a UI library – it solves those issues inside ( don’t know any specific React lib, but for example angular-material, paper ( for react native ) and i’m almost sure something like bootstrap etc. have those out of the box ).

    I’m almsot 100% sure that you are facing default browser style issues – it is when a certain browser has a specific native style for each element ( if you place a button or input on android and ios it will look and behave a bit different )

    If you wan’t to stick to plain CSS i would suggest to use CSS reset (https://meyerweb.com/eric/tools/css/reset/) or something similar and i’m almost 100% sure it will solve your issue

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search