Início / coding / Perguntas / 79559042
Accepted
Hahanap
Asked: 2025-04-07 12:00:02 +0800 CST

Meu site HTML está errado no navegador do Iphone

  • 772

Tenho um site e ele funciona corretamente em computadores e Androids.

Quando verifico meu site no Iphone, há 2 coisas erradas

  1. O valor do tamanho na tag de entrada HTML não aumenta o tamanho da entrada, mas depende do valor máximo

  2. Quando eu rolo para baixo no meu site enquanto ele carrega mais conteúdo, a página rola para cima até o início, o que é diferente no Desktop e no Android.

Existe alguma solução para corrigir isso, como alterar alguns dos meus códigos HTML e Javascript para que funcione corretamente no navegador do iPhone?

Estes são meus códigos:

<input  min="1" max="200" value="1" maxlength="7" required size="7">

if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 50)){//Loads}

1 respostas

  1. Best Answer
    1. No iOS Safari, o atributo size de an não afeta a largura visual da entrada como acontece em navegadores de desktop ou Android. Em vez disso, o tamanho é mais determinado pelo CSS, e o valor max pode influenciar o layout de maneiras sutis.

    Solução: Use CSS para controlar o tamanho, não o tamanho ou o atributo max.

    <input
  type="number"
  style="width: 100px;" 
  min="0"
  max="9999"
  inputmode="numeric"
/>

// For small devices like iPhone
@media screen and (max-width: 500px) {
  input[type="number"] {
    width: 100px;
  }
}
    1. Você anexa elementos sem preservar o estado de rolagem. Ou o navegador está tentando "adivinhar" o layout e renderiza novamente.

    Solução: Use position: relative em contêineres

    .container {
  position: relative;
}

    Se você estiver carregando conteúdo com JavaScript, preserve manualmente a rolagem:

    const scrollPos = window.scrollY;
loadMoreContent(); // append content
window.scrollTo({ top: scrollPos });
    • 1

relate perguntas