Actually working on my second site and I want it to be capable for all devices, but unfortunately when I open it on my Iphone there is a horizontal scrolling bar which leads to a white page, and I don't want that.

By the way, I already used the meta code, and I stopped scaling

Code:-

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">

HELP ME GUYS ..

THANK YOU ! .

.

.

EDITED

I fixed by problem by adding this code ..

html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

But now there is another problem

Actually there is a space before the button .. And I can,t move the button up

Actually working on my second site and I want it to be capable for all devices, but unfortunately when I open it on my Iphone there is a horizontal scrolling bar which leads to a white page, and I don't want that.

By the way, I already used the meta code, and I stopped scaling

Code:-

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">

HELP ME GUYS ..

THANK YOU ! .

.

.

EDITED

I fixed by problem by adding this code ..

html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

But now there is another problem

Actually there is a space before the button .. And I can,t move the button up

• javascript
• html
• ios
• css
• iphone

• stackoverflow./questions/45892623/… – Farhad Commented Aug 28, 2017 at 17:17
• Do you adjust the width on the page at all anywhere in javascript? If not, use google chrome on your puter, open the inspector, toggle the device toolbar, select the iPhone, and pinpoint the element that is causing the screen to expand the width past the screen. – Dan Orlovsky Commented Aug 28, 2017 at 17:21

2 Answers 2

If CSS is acceptable for you instead of HTML:

html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

You could write a media query in your CSS. Depending on the IPhone size you're looking for.

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) {overflow-x:hidden;}

If you're looking for a different IPhone size, simply look up there widths and adjust the media query as neccessary.