简体   繁体   中英

How to disable horizontal scrolling in html for the iphone

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

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM