powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Глючит верстка на мобильных устройствах
10 сообщений из 10, страница 1 из 1
Глючит верстка на мобильных устройствах
    #38527320
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Всем привет.
Сделал тестовый пример, чтобы продемонстрировать суть проблемы. Пример лежит тут .

Суть: есть три ячейки таблицы в одной строке. В первой и последней - картинка с закругленными краями. Центральная просто залита цветом. В местах стыка картинок и центральной ячейки появляются непонятные вертикальные полосы. Проблема наблюдается на ipad, iphone и на моем samsung note 2 (android). На десктопных браузерах (хром, опера, фф, сафари) - все ок.

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

В чем может быть проблема, кто-нибудь знает? Уже который день бьюсь, может кто свежим взглядом увидит причину, глаз замылен уже.

Что только не пробовал: и картинки пересохранял, и по всему html символы переноса на новую строку убирал (делал весь html в одну строку), и полупрозрачные пнг делал обычными (т.е. без уголков) - ничего не помогает!

Плиз, хелп.
...
Рейтинг: 0 / 0
Глючит верстка на мобильных устройствах
    #38527350
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
посмотрел с помощью http://testiphone.com/
полос не вижу

ЗЫ попробуйте поиграться с cellpadding, cellspacing, border-collapse...
...
Рейтинг: 0 / 0
Глючит верстка на мобильных устройствах
    #38527426
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
А нормального i-устройства нету? Педдинги и спейсинги по нулям прововал, бордер коллапс - коллапс тоже, не помогает!
...
Рейтинг: 0 / 0
Глючит верстка на мобильных устройствах
    #38527440
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
нетую как-то все эмуляторами обхожусь
...
Рейтинг: 0 / 0
Глючит верстка на мобильных устройствах
    #38527697
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Эта проблема называется масштабирование. Браузер не фотошоп, он не может пропорционально растянуть страницу как единый рисунок, а растягивает отдельные блоки-кусочки, отсюда появление пустых мест (полос) - разъезжание элементов.

По умолчанию телефон растянул вашу таблицу до больших размеров и получились нестыковки блоков, отсюда и чёрные полосы (фон от body в местах нестыковки). Можно сделать нормальную мобильную версию сайта и запретить телефону масштабировать страницы через <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> Без масштабирования никаких полос нет, с масштабированием - есть. Проверено в Iphone 5, Safari.
...
Рейтинг: 0 / 0
Глючит верстка на мобильных устройствах
    #38528127
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
st_st,
Спасибо, Ваш совет помогает, но не полностью. Например, если просматривать сайт на айпаде (я сейчас не про мой пример, а про полноценный сайт) при альбомной ориентации, то все ок. Если потом айпад развернуть - то опять появляются эти полосы.

И вообще я что-то не совсем понимаю: что получается, нужно делать отдельные версии сайтов под всех типов устройств? Что Вы понимаете под "нормальной" мобильной версией? Версия, со своей шириной дизайна, как минимум? Но ведь те же мобильные устройства и планшеты имеют разные разрешения. Как тогда быть?
...
Рейтинг: 0 / 0
Глючит верстка на мобильных устройствах
    #38528187
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
"Нормальная версия" - чтобы не приходилось масштабировать страницу на телефонах/планшетах. Взять за минимум 320px и до 1024px сверстать резиной + media queries для скрытия ненужных элементов/перестройки макета при малой ширине. Не важно на каком устройстве будет отображаться, важны размеры и расположение элементов, то есть тестить можно и в обычном браузере, уменьшив окно до 320px.

При смене ориентаций тоже масштабирование происходит, к примеру шрифтов. Для начала шрифтам "-webkit-text-size-adjust:none;" в body поставить.
...
Рейтинг: 0 / 0
Глючит верстка на мобильных устройствах
    #38528204
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Во-первых, резиной можно сверстать не любой дизайн-макет. Во-вторых, это далеко не всегда выглядит красиво.
Неужели нет других решений? А про смену ориентаций почитал, что пока не все устройства понимают медиа кверис.

Смотрю вот сюда: www.afisha.ru. Там стоит Ваше предложение, но верстки резины нет, поэтому сайт на узком экране мобильного устройства не умещается, приходится крутить его по ширине. Выглядит тупо, конечно!
...
Рейтинг: 0 / 0
Глючит верстка на мобильных устройствах
    #38528237
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
> Во-первых, резиной можно сверстать не любой дизайн-макет.

Нанять дизайнера и сделать вменяемый макет.

www.afisha.ru - без понятия что это сайт. Судя по виду с телефона - никакой резины и кверисов там нет, обычный статичный макет.

Посмотрите примеры с резиной и кверисами, их полно в интернете. Пример один , уменьшая окно браузера поймёте о чём речь.
...
Рейтинг: 0 / 0
Глючит верстка на мобильных устройствах
    #38528248
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
авторНанять дизайнера и сделать вменяемый макет.
Дизайнера то нанять можно, но есть еще "хочу" заказчика :)

Ладно, спасибо, буду разбираться!
...
Рейтинг: 0 / 0
10 сообщений из 10, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Глючит верстка на мобильных устройствах
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]