Horizontal scrolling on iPhone5

Asked

Viewed 59 times

1

The site opens perfectly on all devices, except on iPhone 4 and 5. In these they are with horizontal scrolling, as if it were bigger than the resolution.

http://homologacao.programamaistop.com.br/

Thus, when it opens, the modal is not centralized!

This problem is common in iPhone 5 ?

inserir a descrição da imagem aqui

javascript css screen-resolution
  • 1

    This image you posted is like this because you dragged ? In any case, add a overflow-x: hidden when the resolution is less than 480px;. But it shouldn’t be like this. There’s some element you’re using width with fixed size instead of 100%. It’s better to settle this than to put one overflow. It might be the modal. You’ll have to use the CSS width: 100% !important to make it work.

  • 1

    The problem is that only does not work on iPhone 4 and 5! I tested on android device with small resolution and is all right!

  • 1

    I looked at your source code and realized it has a tag like this: <meta name="viewport" content="width=device-width, initial-scale=1">. Switch to this and see if it works: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">.

  • 1

    Thanks, I’ll try. But explain to me how it works? rs

  • 1

    This site https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag and this site http://tableless.com.br/manipulando-metatag-viewport/ can help you understand this meta tag. Basically it serves to control the layout of the page on mobile devices. The viewport is the area your site will occupy on the screen. Sometimes when some element of the screen explodes, it is too big in a given device is for lack of this tag configured to work on the device.

No answers

Browser other questions tagged javascript css screen-resolution

You are not signed in. Login or sign up in order to post.