Overflow не работает на телефоне

Обновлено: 26.01.2025

При просмотре в браузере настольного компьютера черная строка меню правильно распространяется только до края окна, поскольку body имеет overflow-x:hidden .

В любом мобильном браузере, будь то Android или iOS, черная строка меню отображается во всю ширину, что приводит к появлению пробелов в правой части страницы. Насколько я могу судить, этот пробел даже не является частью тегов html или body .

Даже если я установил для окна просмотра определенную ширину в <head> :

Сайт расширяется до 1100 пикселей, но все еще имеет пробел, превышающий 1100 пикселей.

Что мне не хватает? Как мне сохранить размер окна просмотра до 1100 и отключить переполнение?

Это особенно актуально для iOS9. – Chuck Le Butt 03/12/2021

Создание сайта - оболочки DIV внутри <body> и применяя overflow-x:hidden к обертке вместо <body> или <html> исправили проблему.

Похоже, что браузеры, которые анализируют тег <meta name="viewport"> , просто игнорируют атрибуты overflow в тегах html и body .

Примечание. Вам также может потребоваться добавить position: relative в div-оболочку.

Я обнаружил, что в дополнение к установке overflow на hidden мне пришлось установить position на fixed . – Victor S 11/01/2013

Для меня просто добавление overflow-x: hidden к первому div внутри body работало нормально. Не нужно добавлять еще один div , просто попробуйте установить его на крайний div . – Gchtr 11/01/2013

Добавление позиции к фиксированной не дает мне возможности прокручивать! – theorise 11/01/2013

Добавление div-оболочки с overflow: hidden помогло мне в iOS7! – Jason Farnsworth 11/01/2013

Я попробовал, я поместил весь свой код в div и дал ему overflow-x: hidden, но не работает, я добавляю <meta name = "viewport" content = "width = device-width, initial-scale = 1"> тоже, но ничего не изменилось: / любые идеи? – user3057089 11/01/2013

Создание оболочки div вокруг всего в <body> работает. – Vennsoh 11/01/2013

Не работал у меня на MobileSafari (iOS9), пока я не убедился, что метатег области просмотра выглядит следующим образом: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> - проблема здесь: изменение основного контейнера содержимого может вызвать большое изменение высоты документа, что, в свою очередь, может вызвать странное поведение масштабирования . – leepowers 11/01/2013

@leepowers overflow-x: hidden все еще не работает у меня даже после того, как я добавлю этот метатег. Не могли бы вы поделиться ссылкой на ваш сайт, где он работает? – jupiteror 11/01/2013

переполнение: скрыто; высота: 100%; вместе работает на меня – craigstar 11/01/2013

Определенно ^, если вы обнаружите элемент за пределами этой области, убедитесь, что он не установлен на absolute, а вместо этого установлен на fixed. – JoeCodeCreations 11/01/2013

@theorise ничего не работало, кроме position: fixed . спасибо <33 – oldboy 11/01/2013

Привет, банда, когда я обнаружил, что position:relative тоже работает. – Thomas Valadez 11/01/2013

overflow: scroll , если вы хотите, чтобы пользователь по-прежнему мог видеть переполненный контент – user3666653 11/01/2013

Я пробовал это для своего ионного приложения (только для устройств iOs), но он не работает ни для одной позиции содержимого тела. – KuldipKoradia 11/01/2013

Ты спас меня, чувак, Бог знает, что я работаю над этой проблемой с последних 3 часов Спасибо 1M – Mir Stephen 11/01/2013

Исправлена проблема и для меня. В моем случае относительное позиционирование оболочки div не требовалось. – pinglock 11/01/2013

Обновление - в конце концов, относительное позиционирование было важно! Без него альбомная ориентация в мобильных браузерах нарушала макет. – pinglock 11/01/2013

te amo breoooooh <33333333333333333333333333333333333333333333333 – k0o 11/01/2013

Привет, отличный ответ, хотя это решает начальную проблему, но для любого из вас, у кого есть липкая навигация, она больше не прилипает! Я решил это, поставив липкую навигацию за обертку! – Hasintha Abeykoon 11/01/2013

Спасибо, но применение overflow к html и / или body в любой комбинации не решило проблему. – Indigenuity 11/01/2013

Извините, что у вас не получилось. Прежде чем я ответил, я провел быстрый тест, используя ваш сайт и применив свое предложение к вашему CSS. По крайней мере, проблема решена для стандартного браузера и браузера дельфинов на моем телефоне Android. – Đinh Carabus 11/01/2013

Из любопытства, что вы используете для изменения CSS в своих мобильных браузерах? – Indigenuity 11/01/2013

Не знаю, возможно ли это. Я также ищу мобильный браузер с каким-то плагином для разработчиков :) В вашем случае я просто загрузил часть вашего сайта, чтобы внести изменения локально на свой компьютер, а затем загрузил его на свой веб-сервер - очень неприятный обходной путь;) – Đinh Carabus 11/01/2013

Работал у меня. eduardd.eu/projects/ezo (между 480 и 992px нижним колонтитулом была проблема с переполненным изображением женщины и полотенец) – Eduard 11/01/2013

Кто-нибудь знает, почему это работает, когда отдельно указывать body <> и html <> нет? – hamncheez 11/01/2013

Также необходимо добавить height:100%; , иначе вертикальная прокрутка не будет работать должным образом на страницах с загружаемыми изображениями (что приводит к увеличению высоты страницы). – Arno van Oordt 11/01/2013

Это сработало для меня, когда я также включил position: relative на body . – George WS 11/01/2013

Комментарий VictorS к принятому ответу заслуживает того, чтобы быть его собственным ответом, потому что это очень элегантное решение, которое действительно работает. И добавлю немного полезности.

Виктор отмечает, что добавление position:fixed работает.

И это действительно так. Тем не менее, у него также есть небольшой побочный эффект, связанный с прокруткой вверх. position:absolute решает эту проблему, но заново вводит возможность прокрутки на мобильном устройстве.

Если вы знаете свое окно просмотра ( мой плагин для добавления окна просмотра в <body> ), вы можете просто добавить переключатель css для position .

Я также добавляю это, чтобы нижележащая страница не прыгала влево / вправо при отображении / скрытии модальных окон.

Есть ли способ заставить мобильную часть не прыгать наверх? – WraithKenny 13/07/2014

Что сработало для меня, так это поворот элемента, который должен был быть скрыт путем переполнения, из position: absolute в position: fixed. К счастью. – Chuck Le Butt 13/07/2014

@WraithKenny - Если вы хотите, чтобы страница не перескакивала вверх на мобильном устройстве, вы можете использовать следующий хакерский / уродливый подход. Внутри вашей модальной функции убедитесь, что вы получили текущее смещение прокрутки, прежде чем что-либо делать, чем применить модальный стиль вместе, а также установить верхний край вашего тела, равный минусу текущего смещения. Убедитесь, что при удалении модального окна вы установили поле обратно на 0 и прокрутите страницу до исходного смещения. – Emil Borconi 13/07/2014

Это решение работает только в том случае, если содержимое вашего модального окна умещается на экране, т.е. вам не нужно прокручивать сам модальный экран. – Tobias 13/07/2014

На моей странице есть и другие элементы с фиксированным и абсолютным позиционированием. Из-за того, что корпус position:fixed or absolute нарушает их положение, тоже. Не подходит / работает в моем случае :( – sohaiby 13/07/2014

Я думаю, что это ответ на другой вопрос, чем я собирался задать, но он отвечает на него хорошо. Я хотел задать вопрос не о модальных окнах, а о любом произвольном элементе на переполненной странице. Так что position:fixed не подходит для многих из этих элементов. Первоначальный вопрос на самом деле не указывал на это, поэтому я все еще думаю, что этот ответ очень полезен. – Indigenuity 13/07/2014

Как утверждает @Indigenuity, это, по-видимому, вызвано тем, что браузеры анализируют тег <meta name="viewport"> .

Чтобы решить эту проблему в источнике, попробуйте следующее:

В моих тестах это не позволяет пользователю уменьшать масштаб для просмотра переполненного содержимого и, как результат, также предотвращает панорамирование / прокрутку к нему.

Добавление initial-scale=1 к существующему метатегу области просмотра действительно решает проблему. Спасибо! – JamesWilson 18/04/2016

Для меня это был minimum-scale=1 , который исправил это – jpenna 18/04/2016

Это то, что на самом деле сработало у меня после того, как я попробовал все остальное. Большое спасибо ! – Harsha Limaye 18/04/2016

Это помогает, но пока не мешает горизонтальной полосе прокрутки на мобильных устройствах. – Iggy 18/04/2016

Вью, спасибо за это. Так было в моем случае. Только в медиа-запросах пробелы появляются внизу и справа. Ты, братан, заслуживаешь миллиона + и спасибо – leipzy 18/04/2016

Намного лучше, чем другие решения здесь - устранение причины проблемы, а не симптома. Спасибо! – rinogo 18/04/2016

Для меня это не решает проблему с Chrome Modile – shitpoet 18/04/2016

Это простейшее решение проблемы горизонтальной прокрутки в Safari.

Вроде работает. Но есть ли у вас объяснение, почему это работает? – LarS 04/09/2017

Нет, наконец-то не сработало. В итоге я сделал математику и убедился, что div не шире, чем разрешено, css calc () мне здесь очень помог, поскольку он позволяет смешивать относительную ширину (vw или%) и абсолютную ширину (px). – LarS 04/09/2017

Конечно, это своего рода обходной путь. Где-то еще что-то переливается, сейчас просто отрезано. Попробуйте добавить правило css: * Если вы все еще не можете найти переполняющийся элемент, возможно, это связано с каким-то запасом. Попробуйте добавить * и посмотрите, исчезнет ли переполнение. – Waltur Buerk 04/09/2017

Я не уверен, что парень, который сказал, что это не работает, делал неправильно (возможно, не обновлял свой кеш). Это решение действительно работает. – Tom Walker 04/09/2017

Это единственное, что помогло мне скрыть абсолютно позиционированный элемент, который анимируется за кадром. – diachedelic 04/09/2017

Не могу поверить, что это все еще проблема в 2019 году. Но вышеприведенное решение полностью сработало. Спасибо. – staxim 04/09/2017

Проблема с настройкой overflow-x: hidden на body в том, что position: sticky перестает работать. – powerbuoy 04/09/2017

Это решение не работает на устройствах с IOS 13.0 и более поздних версий. Любое решение? – Erum 04/09/2017

работает на iOS9

Это действительно работает, но установка position: fixed на ваше тело заставляет вас прокручиваться наверх – ThaoD5 21/09/2015

Странно, но у меня это сработало и без фиксированной позиции. Только одно из всех решений здесь! – Garavani 21/09/2015

Только один, который работал у меня, с использованием chrom и boostrap + angularJS – kiwicomb123 21/09/2015

Создание div-оболочки сайта внутри тела и применение overflow-> x: hidden к оболочке INSTEAD тела или html устранило проблему.

Это сработало для меня после добавления position: relative в оболочку.

Это сработало для меня. Побочным эффектом было то, что у меня две полосы прокрутки вместо одной. Решением было сделать его overflow: hidden вместо overflow-x: hidden . Работает на мобильных Safari, Chrome, IE11 на OS X и Win. – pop 29/11/2016

Не трогайте область просмотра: <meta name="viewport" content="width=device-width, initial-scale=1.0">

Регулировка padding к 10px курсовых листьев меню слева к краю панели, вы можете положить оставшиеся 40px к каждому из li , 20px на каждой стороне слева и справа:

Когда вы уменьшите размер браузера, вы все равно увидите белый фон: вместо этого поместите текстуру фона из вашего div в body . Или, в качестве альтернативы, отрегулируйте ширину меню навигации от 100% до более низкого значения с помощью медиа-запросов. Чтобы создать правильный макет, необходимо внести множество изменений в ваш код, я не уверен, что вы собираетесь делать, но приведенный выше код каким-то образом исправит вашу переполненную панель.

если вы используете box-sizing: border-box; , вы можете добавить отступ к div шириной 100%. – CJT3 11/01/2013

Ни одно предыдущее решение не помогло мне, мне пришлось смешать их, и проблема была исправлена также на старых устройствах (iphone 3).

Во-первых, мне пришлось обернуть html-контент во внешний div:

Затем мне пришлось применить скрытое переполнение к оболочке, потому что overflow-x не работал:

Даже если я установил для области просмотра определенную ширину в <head> :

Сайт расширяется до 1100 пикселей, но все еще имеет пробел, превышающий 1100 пикселей.

Что мне не хватает? Как мне сохранить размер окна просмотра до 1100 и отключить переполнение?

Создание div-оболочки сайта внутри <body> и применение overflow-x:hidden к оболочке вместо <body> или <html> устраняет проблему.

Оказывается , что браузеры , которые анализируют в <meta name="viewport"> тег просто игнорировать overflow на атрибуты html и body тегах.

Примечание: вам также может потребоваться добавить position: relative в оболочку div.

Я обнаружил , что в дополнение к установив overflow для hidden , я должен был установить , position чтобы fixed . Добавление позиции к фиксированной не позволяет мне прокручивать! Я попробовал, я поместил весь свой код в div и дал ему overflow-x: hidden, но не работает, я добавляю <meta name = "viewport" content = "width = device-width, initial-scale = 1"> тоже, но ничего не изменилось: / любые идеи? @leepowers overflow-x: hidden все еще не работает у меня даже после того, как я добавлю этот метатег. Не могли бы вы поделиться ссылкой на ваш сайт, где он работает? Привет, банда, когда я обнаружил, что position:relative это тоже работает. Спасибо, но применение overflow чего-либо html и / или body в любой комбинации не решило проблему. Извините, что у вас не получилось. Прежде чем я ответил, я быстро протестировал ваш сайт и применил свое предложение к вашему CSS. По крайней мере, проблема исправлена для стандартного браузера и браузера дельфинов на моем телефоне Android. Работал у меня. eduardd.eu/projects/ezo (в нижнем колонтитуле от 480 до 992 пикселей возникла проблема с переполненным изображением женщины и полотенец) Кто-нибудь знает, почему это работает, когда отдельно указывать body <> и html <> нет? Также необходимо добавить height:100%; , иначе вертикальная прокрутка не будет работать должным образом на страницах с загружаемыми изображениями (которые увеличивают высоту страницы).

Виктор отмечает добавление position:fixed работ.

И это действительно так. Тем не менее, у него также есть небольшой побочный эффект, связанный с прокруткой вверх. position:absolute решает эту проблему, но вновь вводит возможность прокрутки на мобильном устройстве.

Если вы знаете свою область просмотра ( мой плагин для добавления области просмотра <body> ), вы можете просто добавить переключатель css для position .

Я также добавляю это, чтобы основная страница не прыгала влево / вправо при отображении / скрытии модальных окон.

Есть ли способ заставить мобильную часть не прыгать наверх? Что сработало для меня, так это поворот элемента, который должен был быть скрыт путем переполнения, из position: absolute в position: fixed. К счастью. @WraithKenny - Если вы хотите, чтобы страница не перескакивала вверх на мобильном устройстве, вы можете использовать следующий хакерский / уродливый подход. Внутри вашей модальной функции убедитесь, что вы получили текущее смещение прокрутки, прежде чем что-либо делать, чем применять модальный стиль вместе, а также установить верхний край вашего тела, равный минусу текущего смещения. Убедитесь, что при удалении модального окна вы установили поле обратно на 0 и прокрутите страницу до исходного смещения. Это решение работает только в том случае, если содержимое вашего модального окна умещается на экране, т.е. вам не нужно прокручивать сам модальный экран. На моей странице также есть другие фиксированные и абсолютные элементы. Заставляя тело position:fixed or absolute менять свое положение, тоже. Не подходит / работает в моем случае :(

Это самое простое решение проблемы горизонтальной прокрутки в Safari.

Вроде работает. Но есть ли у вас объяснение, почему это работает? Нет, наконец-то не сработало. В итоге я сделал математику и убедился, что div не шире, чем разрешено, css calc () мне очень помог, поскольку он позволяет смешивать относительную ширину (vw или%) и абсолютную ширину (px). Конечно, это своего рода обходной путь. Где-то еще что-то переливается, сейчас просто отрезано. Попробуйте добавить правило css: * <контур: сплошной красный 1px; >Если вы все еще не можете найти переполняющийся элемент, возможно, это связано с каким-то запасом. Попробуйте добавить * и посмотрите, исчезнет ли переполнение. Не могу поверить, что это все еще проблема в 2019 году. Но вышеприведенное решение полностью сработало. Спасибо.

Как утверждает @Indigenuity, это, по-видимому, вызвано тем, что браузеры анализируют <meta name="viewport"> тег.

Чтобы решить эту проблему в источнике, попробуйте следующее:

Добавление initial-scale=1 к существующему метатегу области просмотра действительно решает проблему. Благодарность! Для меня это было то, minimum-scale=1 что исправило это Это то, что на самом деле сработало у меня после того, как я попробовал все остальное. Большое спасибо !

работает на iOS9

Это действительно работает, но установка position: fixed на вашем теле заставляет вас прокручивать вверх Странно, но у меня это сработало и без фиксированной позиции. Только одно из всех решений здесь! Только один, который сработал для меня, с использованием chrom и boostrap + angularJS

Не трогайте область просмотра: <meta name="viewport" content="width=device-width, initial-scale=1.0">

При настройке на 10 padding пикселей, конечно, левое меню остается к краю панели, вы можете поместить оставшиеся 40 пикселей на каждую из них li , по 20 пикселей с каждой стороны слева и справа:

Когда вы уменьшите размер браузера, вы все равно найдете белый фон: поместите текстуру фона вместо вашего div в body . Или, как вариант, отрегулируйте ширину меню навигации от 100% до более низкого значения с помощью медиа-запросов. Чтобы создать правильный макет, необходимо внести множество изменений в ваш код, я не уверен, что вы собираетесь делать, но приведенный выше код каким-то образом исправит вашу переполненную панель.

если вы используете, box-sizing: border-box; вы можете добавить отступ к div шириной 100%.

Создание div-оболочки сайта внутри тела и применение overflow-> x: hidden к оболочке INSTEAD тела или html устранило проблему.

Это сработало для меня после добавления position: relative в оболочку.

Это сработало для меня. Побочным эффектом было то, что у меня две полосы прокрутки вместо одной. Решением было сделать это overflow: hidden вместо overflow-x: hidden . Работает на мобильных Safari, Chrome, IE11 на OSX и Win.

Добавление обертки <div> вокруг всего вашего контента действительно сработает. Хотя семантически "неприглядно", я добавил div с классом overflowWrap прямо внутри body тега, а затем установил свой CSS следующим образом:

просмотренный в настольном браузере, черная строка меню правильно распространяется только на край окна, так как body и overflow-x:hidden .

в любом мобильном браузере, будь то Android или iOS, черная строка меню отображает его полную ширину, которая приносит пробелы справа от страницы. Насколько я могу судить, этот пробел даже не является частью html или body теги.

даже если я установил viewport в a специфическая ширина в <head> :

сайт расширяется до 1100px, но по-прежнему имеет пробелы за пределами 1100.

что я упустил? Как сохранить видовое окно до 1100 и отключить переполнение?

создание обертки сайта div внутри body и применении overflow-x:hidden к оболочке вместо body или html Исправлена проблема.

похоже, что браузеры, которые анализируют <meta name="viewport"> тег просто игнорировать overflow атрибуты html и body теги.

победителикомментарий к принято отвечать заслуживает быть собственным ответом, потому что это очень элегантное решение, которое действительно работает. И я добавлю немного пользы.

Виктор отмечает, добавив position:fixed строительство.

и это действительно так. Тем не менее, он также имеет небольшой побочный эффект прокрутки вверх. position:absolute разрешает это, но повторно вводит возможность прокрутки на мобильном телефоне.

если вы знаете тега (мой плагин для добавления окна <body> ) вы можете просто добавить переключатель css для position .

Я также добавляю это, чтобы предотвратить переход базовой страницы влево/вправо при отображении / скрытии модалов.

работает на iOS9

Как состояния @Indigenuity, это, по-видимому, вызвано браузерами, анализирующими <meta name="viewport"> тег.

чтобы решить эту проблему в источнике, попробуйте следующее:

в моих тестах это предотвращает масштабирование пользователя для просмотра переполненного контента и, как результат, предотвращает панорамирование/прокрутку к нему.

это самое простое решение для решения горизонтальной прокрутки в Safari.

ни одно предыдущее решение не работало для меня, мне пришлось смешивать их и исправлять проблему также на старых устройствах (iphone 3).

во-первых, мне пришлось обернуть содержимое html во внешний div:

затем мне пришлось применить переполнение, скрытое в оболочке, потому что overflow-x не работал:

и это решило проблему.

сохранить нетронутым просмотра: <meta name="viewport" content="width=device-width, initial-scale=1.0">

настройка padding к 10px конечно выходит левое меню к краю бар, вы можете поставить оставшиеся 40 пикселей для каждого li , в 20px С каждой стороны слева и справа:

при изменении размера браузера меньше, вы найдете еще белый фон: поместите текстуру фона вместо div в body . Или же измените ширину меню навигации со 100% на меньшее значение с помощью запросов мультимедиа. Есть много корректировок в ваш код, чтобы создать правильный макет, я не уверен то, что вы намерены сделать, но приведенный выше код каким-то образом исправит ваш переполненный бар.

добавление фантик <div> вокруг всего вашего контента действительно будет работать. Хотя семантически "icky", я добавил div с классом overflowWrap прямо внутри body тег, а затем установите set my CSS следующим образом:

может быть сейчас перебор, но работает как шарм!

Я столкнулся с той же проблемой с устройствами Android, но не iOS устройств. Удалось решить, указав положение: относительное во внешнем div абсолютно расположенных элементов (с переполнением:скрыто для внешнего div)

я решил проблему, используя overflow-x: hidden; следующим образом

структура выглядит следующим образом

1st div end_screen >> inside it >> end_screen_2(div) >> inside it >> end_screen_2.

'end_screen is the wrapper of end_screen_1 and end_screen_2 div's

Как сказал subarachnid переполнение-X скрыто для тела и html работал Вот рабочий пример

создание обертки сайта div внутри тела и применение переполнения - >x: hidden к обертке вместо тела или html Исправлена проблема.

это сработало для меня после добавления position: relative в обертке.

Я просто работал над этим в течение нескольких часов, пробуя различные сочетания вещей из этой и других страниц. В конце концов, мне удалось сделать оболочку сайта div, как было предложено в принятом ответе, но установить оба переполнения в hidden вместо переполнения X. Если я оставляю overflow-y при прокрутке, я получаю страницу, которая прокручивается вертикально только на несколько пикселей, а затем останавливается.

всего этого было достаточно, не устанавливая ничего на тело или html элементы.

В принципе, я динамически добавляю строки в таблицу, и я хотел бы, чтобы контейнер прокручивал переполнение. Сначала я попытался сделать очевидное:

и это прекрасно работает везде, кроме Safari на мобильных устройствах ios.

С тех пор я потратил часы, пытаясь использовать каждую комбинацию стилей, о которых я могу думать и читать, но я не могу получить стандартную прокрутку переполнения. Самое близкое, что я получил, - это показать полосу прокрутки (хотя это не было прокруткой).

Вся помощь приветствуется. Мне трудно поверить, что невозможно прокрутить содержимое div в модальном режиме в Safari.

Изменить: по-прежнему в этой проблеме. Мне нужно решить эту проблему.

ОТВЕТЫ

Ответ 1

Я решил это, переключившись на мультиселекцию (и скрывая прокручиваемый div) на мобильных устройствах (так что никакого реального решения). Спасибо всем за помощь.

Изменить: Я, наконец, понял это. В основном, что случилось, так это то, что после того, как я переключился на использование мультиселектора, он тоже странно работал на устройствах IOS при использовании Safari.

В ходе дальнейшего изучения мой коллега заметил dojo события касания как для прокручиваемого div, так и для мультиселекта (используемый мной шаблон использует dojo). Я начал искать в источнике шаблона, чтобы выяснить, почему эти события были привязаны ко всем этим элементам, и я заметил модуль dojo, называемый "dojo/touch". После удаления этого модуля из проекта элементы работают нормально в Safari.

Отказ в том, что "dojo/touch" и IOS Safari полностью несовместимы.

Ответ 2

Попробуйте применить эту встроенную строку или через JQuery Script

или через JQuery Script

Ответ 3

У меня нет продукта IOS, чтобы проверить это, но похоже, что overflow: auto является известной ошибкой Safari.

Ответ 4

Ответ 5

Вы можете установить overflow-y:hidden; после автоматического переполнения, а на сафари по крайней мере это правило будет применено. Ссылка

Ответ 6

Код для использования двух вложенных div для отображения только вертикальной полосы прокрутки.

Ответ 7

вы можете попробовать это, он отлично работает для меня

Ответ 8

Проверьте свою версию браузера Safari. И выполните следующие критерии:

Доступно в Safari 3.0 и более поздних версиях.
Доступно в iOS 1.0 и более поздних версиях.

если вы против условий, то получите следующие меры:

Причина: настройка переполнения не очищает поплавок элемента

ИЛИ

Установите положение элемента относительно уровня корня/тела следующим образом:

Примечание: применить только один из них.

Спасибо и приветствуем

Ответ 9

Если ни одно из решений не работает, вы можете попробовать flex: 1 1; Это кросс-браузерная поддержка.

Я надеюсь, что вы, ребята, сможете мне помочь, потому что я, кажется, не могу обернуть свою голову вокруг этого. Я создаю одностраничный сайт, который отлично работает, за исключением одной вещи-overflow-x:hidden на видовом экране планшета (и, вероятно, смартфона тоже, я еще не тестировал его)

Несмотря на то, что тело имеет body , который отлично работает в обычных браузерах на ПК, я могу сдвинуться в сторону примерно на 25 пикселей или около того, потому что это переполнение моего повернутого div, которое торчит из экрана, который я хотел скрыть.

Мета-тег видового экрана.

CSS применяется к media запросам, и они соответствующие элементы, которые переполняются

И обычный CSS применяется к тегам html / body

body < overflow-x:hidden; >это свойство не поддерживается в устройстве nokia. Пожалуйста, помогите мне .

Я не знаю почему, но когда у вас есть стиль CSS overflow-x:hidden на элементе body, то плагин affix не работает. Он просто отказывается переключаться между аффиксом, аффиксом сверху и аффиксом снизу. Я предполагаю, что он не может обнаружить или измерить положение прокрутки, но я понятия не имею.

Нашел ответ на самом деле здесь, на Stack overflow:

Браузеры на мобильных устройствах игнорируют overflow-x:hidden в тегах body и html , если присутствует тег <meta name="viewport"> , поэтому я создал оболочку в теге body, покрывающую rest моего контента с overflow-x: hidden в нем, решая проблему.

Плохо то, что он предотвращает использование плагина jquery, который прокручивается.

Попробуйте установить minimum-scale=1 вместо maximum-scale=1 .

minimum-scale управляет тем, как далеко пользователь может увеличить масштаб, в то время как maximum-scale управляет тем, как далеко он может увеличить масштаб. Чтобы предотвратить просмотр переполнения, вам необходимо ограничить возможность пользователя уменьшать, а не увеличивать масштаб.

Как указал Дорвалла, теги body и html игнорируются браузерами смартфонов, хотя и не браузерами "big screen", я решил проблему, используя первый дочерний элемент структуры страницы, поэтому нет необходимости в дополнительной оболочке.

например, для моего случая WordPress:

Это исключает движение слева направо на мобильных телефонах. Нужна часть HTML, а не только тело!

Я обнаружил, что применение:

для обертки div внутри тела прокрутка немного нервничала на iOS Safari, поэтому я просто дал ей overflow: hidden и оставил тело видимым. Это идеально работало для меня во всех браузерах и устройствах, в которых я нуждался.

если вы обращались overflow-x:hidden для организма , вам стоит обратиться в сек тоже ТМЛ .