Overflow-x iPod touch

Question

Я создаю мобильную версию сайта. У меня есть 3 divs, каждый из которых 33.33% ширины тела с шириной 300% (так что они все по всей ширине экрана), плавающие влево, так что они все бок о бок, и вы можете скользить между разделами, щелкая ссылки.

Я добавил overflow-x: hidden; телу тела, чтобы удалить горизонтальную полосу прокрутки. Это отлично работает на рабочем столе, но на моем iPod touch я все еще могу перетаскивать и прокручивать по горизонтали, используя мой палец, чего я не хочу.

Answer 1

Попробуйте добавить это в разделе HTML head:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 

Это позволит установить ширину вашей страницы по ширине устройства просмотра. На устройстве iOS он также отключит жест сжимается до зума.

Answer 2

Вы должны иметь ширину 300% на оберточном элементе в пределах body. Если у вас есть как width:300%, так и overflow-x:hidden на корпусе, вы будете скрывать содержимое только в пределах body, если содержание, которое вы хотите скрыть, превышает 300%.

См. my example с использованием обертки в пределах body.