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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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