Почему это неправильно выравнивается в браузерах телефонов?

Почему это неправильно выравнивается в браузерах телефонов? Пожалуйста, посмотрите эту страницу в браузере телефона:
https://cheers.desi/profile/munafasutra/

Я не проверял на Android, но на iPhone и т. д. с левой стороны такой большой зазор, а правая сторона полностью обрезана... Что происходит?

На данный момент весь CSS находится на самой странице. Позже помещу в другой файл. Загружен файл темы: (только тема, без содержания)
https://cheers.desi/themes/social.htm

Я бы предпочел, чтобы вместо этого я мог использовать эту тему,
https://cheers.desi/themes/social2column.htm

Здесь используется float для выравнивания двух столбцов рядом на ноутбуках.

но в браузере телефона они будут располагаться ниже друг друга, как и предполагалось.

Проблема в том, что если я использую эту тему, то как только что-то касается экрана, весь сайт начинает автоматически выравниваться.

(вроде как начинает танцевать на экране.

очень раздражает) Эта тема с содержанием:
https://desicheers.com/profile/munafasutra/

У этого также есть проблема с зазором слева и обрезанием справа.

Что вызывает эту проблему?

@deathshadow, можешь тоже посмотреть, пожалуйста?

Пожалуйста, дайте мне знать, какой именно CSS мне нужно изменить, чтобы он выглядел хорошо на телефонах, как он отображается в Firefox на ноутбуке.

Цвета и т. д. исправлю позже.

Выравнивание — большая проблема.

Спасибо

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

Кажется, что все как-то выплеснуто на страницу каким-то старым способом, без всякой рифмы и причины. Что идет рука об руку с несемантической мусорной разметкой, встраиванием style="" в разметку, статическим

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

То, что вы говорите, не имеет никакого отношения к представленному коду. Гораздо меньше вы думаете о конкретном размере устройства, а не о потребностях контента.

Вероятно, именно поэтому вы бегаете и ждете людей с реальным оборудованием для тестирования, тогда как все, что вам ДОЛЖНО быть нужно сделать, это изменить размер окна браузера.

Создайте макет рабочего стола, используя такие методы, как отрицательные поля с плавающей запятой, display:flex или display:grid.



Сузьте окно до тех пор, пока макет не сломается, выясните, сколько EM это произошло, добавьте медиа-запрос, чтобы удалить столбцы, отрегулируйте ширину/отступы/поля, затем намыливайте, промывайте, повторяйте, пока не дойдете примерно до 16em, самого маленького, который мы должны в наше время беспокоиться о поддержке.

Вы создали страницу с использованием методов, которые несовместимы с этим, используя неполную разметку, таким образом, что создание любого «настоящего» макета становится все сложнее и сложнее, чем глубже вы вникаете в это.

Итак, почему, если это:

Это ваш преднамеренный замысел, у вас проблемы.

Их много-много.

Уменьшенные фиксированные метрические шрифты, закругленные углы и границы, выходящие за пределы ширины экрана (видите эту дополнительную полосу прокрутки?). Похоже, вы пытаетесь применить мышление фиксированной ширины к элементам динамической или эластичной ширины. ... и, пожалуйста, из любви к сказке о внебрачном ребенке волшебного маньяка-геноцида в небе, не могли бы вы убрать три отдельных социальных меню, которые, кажется, существуют там без уважительной причины?!? Если есть причина, ни один пользователь не сможет ее расшифровать.

Обычно мы бы посоветовали не устанавливать onclick, потому что другие элементы могут пытаться перехватить элемент, но поскольку мы буквально только что создали элемент, это совершенно безопасно. В любом случае помните, что это настоящие обработчики событий, а не притворная HTML-ерунда.

Они увидят то же самое, что и сейчас, даже без js. Перестанут работать только кнопки «показать больше». И кнопки сверху «Друзья/Поклонники», но на сайте есть и другие места, где к ним можно получить доступ.

Если вы делаете это только для отслеживания кликов, вы можете сделать это таким образом, чтобы не оставить программы чтения с экрана без внимания. Закодируйте его как обычный якорь, но используйте addEventListener, который ТОЛЬКО перехватывает щелчок и не отменяет событие.

Вы можете выполнить скриптовое поведение щелчка как перехват, БЕЗ переопределения обычного поведения отправки привязки. Единственная проблема заключается в том, что отправки без сценария не будут отслеживаться.

Вот почему на МНОГИХ веб-сайтах пользователи, не использующие скрипты, часто занижаются в статистике.

Процент заполнения зависит от ширины экрана, поэтому это тоже неверно.

Используете ли вы шрифты %/EM? Тогда почему вы не используете отступы и поля EM? Вы используете PX, это все или ничего, а не непродуманная смесь и совпадение.



На самом деле между сломанной и неполной разметкой и сломанным/несогласованным макетом я понятия не имею, чего вы вообще пытаетесь достичь с точки зрения макета, а тем более, в чем ваша «проблема». Это типично для кода: когда люди приносят его мне, я говорю им выбросить его и начать все сначала с ПРАВИЛЬНОЙ семантикой и разделением задач.



У вас просто нет основы, на которой можно построить макет.

ЛЮБАЯ планировка.

Брэндон_Уоллес Как мне это сделать с помощью Мой код: 2 новых друга Спасибо

Джит, Вы можете и должны добавить сообщение noscript в HTML следующим образом. Это для браузеров, в которых отключен Javascript.

 
<noscript>

<p style="color:#FC0000;text-align:center">Please enable Javascript</p>
</noscript>

Код (разметка):

Некоторые люди по какой-то причине отключают Javascript, а некоторые веб-сайты почти полностью поддерживают Javascript, поэтому, если Javascript отключен, все, что они увидят, — это пустую страницу при посещении веб-сайта. Существуют также текстовые браузеры, которые не используют Javascript.

Вы уделяете много внимания дисплею мобильного телефона, а не реальному HTML и CSS.

уберите все это на нет и начните с HTML, затем проработайте выравнивание CSS, а затем вы можете поиграть с javascript.

Ваши страницы должны сначала работать в браузерах, а затем адаптироваться к телефонам.

Что, если кто-то посетит ваш сайт и у него отключен JavaScript, что он увидит?

Это для JavaScript.

Ссылки «фото/видео/о программе» и т. д. при нажатии удерживают этот раздел в фокусе при нажатии. Какая форма является неправильной? Вы и раньше указали на это мне, но так и не сказали, какую форму вы имеете в виду. Я не думаю, что у меня есть незакрытые элементы div или paras.

Какой именно, подскажите. Цель атрибута существует, потому что этот веб-сайт также будет загружен в веб-просмотр приложения Android.

При нажатии на внешнюю ссылку она не откроется внутри приложения, а откроется в реальном браузере.

Вот почему «target=_blank»

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

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

То же самое и с JAWS.

Включает разделы, которые обновляются с помощью JavaScript.

Часть внутри

— это навигация по сайту.

Это уведомление с кликабельными ссылками для пользователя.

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

В любом случае,

Я хочу знать, почему в браузерах iPhone такой большой разрыв слева?

Я думаю, что это происходит потому, что я использую фиксированные «пиксели» в отступах и полях.

Это правильно? Я думаю, что изменение его на проценты решит проблему. Прикреплено то, что я вижу в Firefox (в режиме высокой контрастности), о цветах позабочусь позже.

И МНОГИЕ люди отключают или блокируют его. . Из-за недоверия (призрака), ограничения пропускной способности (noscript) или по другим причинам.






Плагины для браузера, предназначенные для ограничения или полной блокировки пользователей, не зря имеют миллионы загрузок. Нетскрипта: Официальный сайт: https://noscript.net

Для Chrome-подобных: https://chrome.google.com/webstore/detail/noscript/doojmbjmlfjjnbmnoijecmcbfeoakpjm?hl=en

призраки
https://www.ghostery.com

И т. д. и т. п. МНОГИЕ эксперты по безопасности блокируют сценарии и предлагают всем сделать это.

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

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



Мир не вращается вокруг новейших и лучших версий хромоподобных устройств; что касается Safari, стареющего, как молоко, и огромного количества старых мобильных устройств с ограниченными возможностями, используемых людьми, которые не могут позволить себе терять тысячу каждые два года, потому что Тиму Куку нужно купить себе путь на пост директора другой спортивной лиги.

Предполагается, что HTML предназначен для всех, и именно поэтому хороший JavaScript должен, когда это возможно, улучшать уже работающую страницу, а не лишать ее возможности работать без сценариев.

https://deathshadow.medium.com/acce...-already-working-page-not-be-the-bf92741d2310

Предположим, что для использования PX и т. д. я хочу иметь

поле: 3 пикселя;

тогда как мне это сделать с помощью EM?

Прямо сейчас я изменил его на

маржа: 0,3%;

но я не уверен, как это будет работать.

В любом случае я не хочу, чтобы на экране мобильного телефона было слишком много пробелов, поэтому, если значение 0,3% окажется очень маленьким, например 1 пиксель, все равно нормально.

У меня тоже нет iPhone, поэтому жду ответа от того, кто проверяет мои сайты на iPhone и iPad.

Придется подождать до завтрашнего утра...

О

Вы спрашивали,

Тогда почему это в разметке? И почему скрипты меняют фокус на ссылках на вкладки?!?

Ссылка «О программе», «Фото», «Видео» и т. д. в js выглядит следующим образом:

О

Если я оставлю его пустым, вот так
О

Тогда фокус программы чтения с экрана переместится в начало страницы.

очень неприятно снова читать всю страницу, пока снова не нажмешь «О программе». Что касается форм, то на самом деле никто не использует формы, просто нажимая клавишу Tab на клавиатуре.

Это то, что вы делаете. Это до сих пор работает и в JAWS, и в NVDA.

Не знаю, почему ваша версия JAWS не читается.

Вы по-прежнему можете читать все, что находится в форме, просто нажимая клавиши вверх/вниз, даже если вы переключаетесь между полями с помощью клавиши Tab.

Причина, по которой я не использую метки, заключается в том, что я использую длинные описания форм, объясняющие, что вводить, иногда с примерами.

Как этот:

https://cheers.desi/register/

Я объясняю, как нужно вводить номер телефона, проверять электронную почту, какой пароль должен быть и т. д. и т. п.

Если я просто сделаю:

Телефон

Тогда большинство людей не будут знать, как нужно вводить номер телефона.

Я сам забыл, какую проверку формата я закодировал, когда пошел собственно регистрироваться.

Это описание было полезным. Двойные разрывы не выполняют работу с абзацами. Эта часть сейчас пуста.

Подпись будет там отображаться. Установить силовой пресс очень просто.

Он выбирает все настройки самостоятельно, вы все равно можете жестко запрограммировать.

Вероятно, проблема заключалась в файле .htaccess, который я запаковал вместе с этой загрузкой.

Возможно, в htaccess был включен https, но базовый URL-адрес был закодирован как отличный от https, поэтому форма установщика перенаправлялась как пустая.

По этой причине установка не была произведена.

Я говорил вам это и тогда.

и htaccess перенаправил форму на https после отправки

Перенаправление не привело к повторному использованию значений, поэтому установщик не сработал.

О ссылках без списков,

Я попробовал это, не думайте, что нет.

Тем не менее, NVDA и JAWS читают их так, как будто они читают их без списков.

NVDA прочитала это как предложение,

JAWS как отдельные ссылки.

Для NVDA, когда он читает предложение ссылок, просто нажмите клавишу табуляции, и он начнет читать ссылки по отдельности.

По умолчанию NVDA читала ссылки по отдельности только тогда, когда я завернул их в тег

.

Теперь вы можете увидеть, как это будет для 5 ссылок,

Главная страница

Вход

Зарегистрируйтесь

и т. д. и т. п.

Это не проблема доступности.

Доступность означает, что люди не могут нажать на ссылку.

На моем веб-сайте они вполне могут щелкнуть ссылку.

Без каких-либо проблем. Навигация должна находиться в правой части экрана ноутбука.

Я сделал это изменение сейчас. На мобильном устройстве оно упадет вниз. Рядом с синим меню есть кнопка «Показать больше», при нажатии на которую на мобильном устройстве сверху появляется навигация.

@brandon_wallace @смертельная тень Я не думаю, что этот тип «отслеживания кликов» будет доступен программам чтения с экрана... Теперь я понимаю, почему на многих сайтах есть текст, по которому можно щелкнуть мышью, но программа чтения с экрана не считывает его как ссылку... Я думаю, что это худшее, что можно сделать для доступности.

Спасибо за объяснение "ЭМ".

Итак, я должен использовать

маржа: 0,18ем;

обычно для эквивалента от 3 до 5 пикселей, верно?

Я не меняю размер шрифта вебкита, оставил как есть.

Сейчас попробую этот метод для дизайна.

Я понимаю вашу точку зрения по поводу нескольких операторов

.

Это данные пользовательского ввода, которые «nl2br выполняются PHP.

Я понял вашу точку зрения, я могу изменить это, чтобы использовать свою собственную функцию.

Какие 3 социальных меню вы здесь упоминаете?

"убрать три отдельных социальных меню, которые, кажется, там есть"

Вы имеете в виду некоторые ссылки под окном поиска?

затем немного в синей полосе,

тогда эти вкладки и т. д.?

Первый — это «трендовые» теги.

Не меню.

Чтобы показать, что публикуют другие люди.

Меню в синей полосе — это фактическое меню для перехода к основным разделам сайта, к панели управления, для управления профилями, для входа/выхода и т. д.

Вкладки и т. д. зависят от страницы, на которой находятся люди.

Вкладки есть только на странице профиля.

на информационной панели есть другая вещь (то, что пользователь хочет видеть на информационной панели, эти параметры),

различаются при управлении профилями (параметры, относящиеся к редактированию профилей).

и так далее.

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

По умолчанию на сайте есть версия вкладок, отличная от JS.

В случае отсутствия JS вкладки отображаться не будут, весь контент будет отображаться друг под другом в DIV.

Когда есть JS, все эти DIV будут скрыты, фактически высота: 1 пиксель готова.

JS создаст кнопки вкладок поверх первого DIV,

и JS загрузит данные из первого DIV в tab_DIV.

Затем при нажатии второй кнопки данные из этого DIV будут загружены в tab_DIV и так далее.

Чтобы создать вкладки, все, что мне нужно сделать, это:

Определить кнопки Tab и пустой div

<скрипт> var tabs = [ «Сообщения», «Фото», «и т. д.»]; Затем напишите данные для этих кнопок, например данные здесь фото здесь и так далее. Затем, наконец, вызовите функцию JS для создания вкладок. <скрипт> showTabs();

Без этой функции JS все данные по-прежнему будут отображаться, в html будут добавлены только дополнительные и дополнительные .

При вызове функции все это становится вкладками, как вы сейчас видите на сайте.

Здесь появляются кнопки

здесь отображается содержимое первой вкладки

Те другие DIV, они все скрываются.

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

Я думаю, что сейчас должно быть несколько лучше. В CSS-файле отсутствовал символ «{» в одном из медиа-запросов. Я также изменил способ отображения этих хеш-ссылок на меньшем экране. Они будут отображаться в виде всплывающего окна на широких экранах ноутбуков, но будут скрыты на мобильном телефоне до тех пор, пока не будет нажата кнопка «Тенденции».