-2

I have a website and it works correctly in Desktop and Androids.

When I check my website in Iphone, there are 2 things that are wrong

  1. Size Value in HTML input tag does not increase the size of input but it depends on Max Value

  2. When i scroll down my website while it loads more contents, the page scroll up to the beginning which is different in Desktop and Androids.

Is there any solution to fix this like changing some my HTML and Javascript codes in order it to work correctly in Iphone browser?

These are my codes:

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

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

1 Answer 1

Reset to default
1
  1. On iOS Safari, the size attribute of an doesn't affect the visual width of the input like it does in desktop browsers or Android. Instead, the size is more determined by CSS, and the max value can influence the layout in subtle ways.

Solution: Use CSS to control the size, not the size or max attribute.

<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. You append elements without preserving scroll state. Or the browser is trying to "guess" the layout and re-renders.

Solution: Use position: relative on containers

.container {
  position: relative;
}

If you’re loading content with JavaScript, manually preserve scroll:

const scrollPos = window.scrollY;
loadMoreContent(); // append content
window.scrollTo({ top: scrollPos });
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.