Currently, I am conducting a test on a webpage using an iPhone 5s with a screen resolution of 1136 x 640 pixels.
The meta tag is set as follows:
<meta name="viewport" content="user-scalable=yes, initial-scale=1, width=device-width, shrink-to-fit=no">
Additionally, the CSS includes:
body {
min-width: 600px;
}
All other classes on the webpage have widths defined in percentages, none exceeding 100%.
Unfortunately, the entire page does not fit within the phone's screen, requiring horizontal scrolling to view all its contents. The issue persists until setting the body's min-width to 300px, which allows for full display on the phone.
This raises the question as to why the 600px width cannot be fully displayed when the phone supports a 640px horizontal resolution. Any insights or guidance would be greatly appreciated. Thank you.