Почему не работает overflow hidden на планшете
Обновлено: 03.07.2024
Я надеюсь, что вы, ребята, сможете мне помочь, потому что я, кажется, не могу обернуть свою голову вокруг этого. Я создаю одностраничный сайт, который отлично работает, за исключением одной вещи-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 для организма , вам стоит обратиться в сек тоже ТМЛ .
Похожие вопросы:
Не работает должным образом в Chrome или Firefox. Есть ли какой-нибудь обходной путь для этого? <!DOCTYPE html> <html> <head></head> <body>.
Я пытался сформулировать этот вопрос по-разному в Google. Я нашел один результат с похожим вопросом. Ответ состоял в том, что вопрос был слишком расплывчатым. Это будет мой первый вопрос, я сделаю.
Я хотел бы иметь элемент заголовка с overflow-x:hidden и overflow-y:visible . Однако по какой-то причине свойство overflow-y , похоже, не соблюдается. Вы можете наблюдать это здесь (проверено на.
body < overflow-x:hidden; >это свойство не поддерживается в устройстве nokia. Пожалуйста, помогите мне .
Я не знаю почему, но когда у вас есть стиль CSS overflow-x:hidden на элементе body, то плагин affix не работает. Он просто отказывается переключаться между аффиксом, аффиксом сверху и аффиксом.
Я использую overflow:hidden, чтобы скрыть свой unglam div на своей веб-странице, он хорошо работает во всех веб-браузерах, но не в мобильном браузере. Кто-нибудь может помочь? body < margin: auto;.
Я искал на этом сайте, Как удалить горизонтальные полосы scroll через iframe, но ни одно решение не сработало. Кто-нибудь может помочь, пожалуйста? Короче говоря, вот код: <iframe.
Я пытаюсь создать сайт, который чувствует себя как родное приложение на устройствах iPhone/Android. Мне удалось настроить его так, чтобы html и body не прокручивались, и у меня есть один контент.
У меня есть таблица, которая содержит различную информацию. Я пытаюсь сделать так, чтобы при переполнении содержимого он обеспечивал горизонтальную полосу прокрутки для просмотра содержимого.
просмотренный в настольном браузере, черная строка меню правильно распространяется только на край окна, так как 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"> тег.
чтобы решить эту проблему в источнике, попробуйте следующее:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> .
в моих тестах это предотвращает масштабирование пользователя для просмотра переполненного контента и, как результат, предотвращает панорамирование/прокрутку к нему.
это самое простое решение для решения горизонтальной прокрутки в 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 элементы.
EDIT: у меня была опечатка для второго тега overflow (мне пришлось вручную ввести исходный код с планшета сюда). Когда я это исправил, оба jsfiddle показали изображение, как и ожидалось, однако планшет android по-прежнему не работает.
Вот как это выглядит на планшете:
2 ответа
Код Android камеры предварительного просмотра, чтобы получить источник камера не работает на планшете Нексус 7 - нормально android 4.2. Camera camera = Camera.open(); camera.startPreview(); Preview preview.setCamera(camera); Он показывает NullPointerException на camera.startPreview(). Может ли.
Я создал приложение android, которое делает снимок при нажатии кнопки, которое отлично работает на эмуляторе, но когда я пытаюсь запустить его на своем планшете (Novo 10 Hero QuadCore)/фактическом устройстве, оно вообще не работает. Любая идея, что, должно быть, скучаете?
Во втором фрагменте кода есть опечатка(html tablet)
Свойство переполнения имеет значение hiden .
В основном мне пришлось создать еще 2 дива внутри div opening_0. Планшету не нравилось позиционирование, отличное от статического, в теге изображения.
Похожие вопросы:
Мне нужен закругленный угол в верхнем левом и верхнем нижнем углах. Итак, у меня есть форма xml, которая установлена на кнопку в качестве фона. <?xml version=1.0 encoding=utf-8?> <shape.
Sensor.TYPE_ORIENTATION отлично работает на мобильном телефоне, но не работает на планшете. List<Sensor> mySensors = mySensorManager.getSensorList(Sensor.TYPE_ORIENTATION); if(mySensors.size().
Когда я выхожу на улицу, у меня не всегда есть с собой ноутбук, но у меня всегда есть мой Nexus 7. Я люблю немного поработать, когда больше ничего не происходит, будь то кодирование.
Код Android камеры предварительного просмотра, чтобы получить источник камера не работает на планшете Нексус 7 - нормально android 4.2. Camera camera = Camera.open(); camera.startPreview(); Preview.
Я создал приложение android, которое делает снимок при нажатии кнопки, которое отлично работает на эмуляторе, но когда я пытаюсь запустить его на своем планшете (Novo 10 Hero QuadCore)/фактическом.
Я создал приложение android, которое не работает на планшете. Я добавил xml файлов в папку res/layout-large . Когда я запускаю эмулятор, он работает, но в планшете он дает ошибку типа -.
Можно ли использовать Android вещей на планшете? Мой проект нуждается в Android вещи , но я не могу использовать для него малину , потому что это будет дорого. Если нет, то что мне делать с normal.
Я пытаюсь понять, почему Bluetooth Web API не работает на моем планшете. Планшет-это Android 4.4.4, Galaxy Tab E. Когда я использую эту демо-страницу в Google Chrome версии 64, я получаю это.
Изучение рабочего процесса python на планшете android Я использую Qpython3, но нахожу его неудовлетворительным Может ли кто-нибудь сказать мне, как лучше всего изучить рабочий процесс python с.
Свойство overflow управляет тем, как ведёт себя содержимое блочного элемента, если его размер превышает допустимую длину/ширину.
Обычно блок увеличивается в размерах при добавлении в него элементов, заключая в себе всех потомков.
Но что, если высота/ширина указаны явно? Тогда блок не может увеличиться, и содержимое «переполняет» блок. Его отображение в этом случае задаётся свойством overflow .
- visible (по умолчанию)
- hidden
- scroll
- auto
visible
Если не ставить overflow явно или поставить visible , то содержимое отображается за границами блока.
Как правило, такое переполнение указывает на ошибку в вёрстке. Если содержимое может быть больше контейнера – используют другие значения.
hidden
Переполняющее содержимое не отображается.
Вылезающее за границу содержимое становится недоступно.
Это свойство иногда используют от лени, когда какой-то элемент дизайна немного вылезает за границу, и вместо исправления вёрстки его просто скрывают. Как правило, долго оно не живёт, вёрстку всё равно приходится исправлять.
При переполнении отображается полоса прокрутки.
scroll
Полоса прокрутки отображается всегда.
То же самое, что auto , но полоса прокрутки видна всегда, даже если переполнения нет.
overflow-x, overflow-y
Можно указать поведение блока при переполнении по ширине в overflow-x и высоте – в overflow-y :
Итого
Свойства overflow-x/overflow-y (или оба одновременно: overflow ) задают поведение контейнера при переполнении:
visible По умолчанию, содержимое вылезает за границы блока. hidden Переполняющее содержимое невидимо. auto Полоса прокрутки при переполнении. scroll Полоса прокрутки всегда.
Кроме того, значение overflow: auto | hidden изменяет поведение контейнера, содержащего float . Так как элемент с float находится вне потока, то обычно контейнер не выделяет под него место. Но если стоит такой overflow , то место выделяется, т.е. контейнер растягивается. Более подробно этот вопрос рассмотрен в статье Свойство float.
Читайте также: