-
Similar Content
-
-
By alex-zzx
Доброго дня
Прошу всех специалистов верстающих под iPad, iPhone оценить вёрстку и сказать что не так.
Вводная - делал тестовое задание по вёрстке для одной компании.
Задание такое:
1) Необходимо сверстать страничку по предложенному макету
2) Требования:
- отображение на устройствах iPad, iPhone от 4 до 6+
- Только HTML + CSS ( без Javascript)
- Как бонус — учёт разрешения экрана (2 файла для каждого изображения - для ретины и без)
Результаты работы:
Исходники: https://github.com/alexey-pod/awem-layout
Макеты: https://github.com/alexey-pod/awem-layout/tree/master/mockups
Результат работы: http://awem-layout.likeuse.ru/
Для поддержки ретины использовал вот эту штуку: https://github.com/alexey-pod/awem-layout/blob/master/css/retina.less
Тестирование: iPad, iPhone устройств к сожалению нет - поэтому тестировал вот здесь:
1) https://www.google.by/webmasters/tools/mobile-friendly/
2) http://quirktools.com/screenfly/
3) http://lab.maltewassermann.com/viewport-resizer/
Ответ от компании:
Некоторые мои соображения:
В папке с шаблонами намешано много макетов с разными названиями, которые имеют незначительные отличия.
В частности это панель с кнопками "News Support Letter".
Панель располагается:
Внизу
https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_iPhone_Portrait.png
https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_iPhone_Album%232.png
https://github.com/alexey-pod/awem-layout/blob/master/mockups/Awem_More_Games_iPhone_v04.psd
Вверху
https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_Portrait.png
https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_Album.png
https://github.com/alexey-pod/awem-layout/blob/master/mockups/Awem_More_Games_iPad_v01.psd
Есть вариант где нет панели вообще
https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_iPhone_Portrait%231.png
https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_iPhone_Album%231.png
Из-за того что я не понял как именно отличать ситуации в которых панель должна быть вверху, быть внизу, панели не должно быть - был выбран универсальный вариант панель вверху и он был свёрстан. Может быть именно в этом была моя ошибка.
Также хочу обратить внимание - компания ничего не сказала про ретину. И я не знаю правильно сделал "ретинизацию" или нет. Может кто-то протестит на реальном девайсе и кинет скрин - буде благодарен.
Заранее благодарен всем кто сможет подсказать мои косяки.
Если бы мы работали через стол то я мог бы задать эти вопросы своему руководителю и переделать задание столько - сколько потребуется. Сейчас же - я не имею такой возможности поэтому надеюсь на помощь сообщества.
-
By lbondodesc
Здравствуйте! Есть проблема адаптивной верстки сайта http://www.hypnoshop.com/test/! В обычном браузере (Firefox, Chrome, Safari) всё норм.. Виглядет вот так..
http://prntscr.com/4srtg9
А на оригинальном IPad так ..
https://s3.amazonaws.com/prod_object_assets/assets/17098870067074/ipad-screen2.png?AWSAccessKeyId=AKIAI7NUHQYARXR2GGCQ&Expires=1412414176&Signature=MgKuXc%2FinDf5SnIeFyOApOAdaJI%3D#_=_
Ipad игнорирует свойство overflow? подскажите что делать в текущей ситуации.. ? Спасибо.
-
By seregamurman
Всем привет!
Помогите пожалуйста разобраться с проблемкой.
сайт sledd.ru
При отображении в браузерах (всех) на компьютерах всё отображается корректно, но при отображении сайта на ipad, слетает стиль для верхнего-правого блока в котором телефоны. Такое ощущение, что стиль действует только не первую цифру верхнего span и не даёт присвоить стиль для другого span.
Ссылка на изображение: https://yadi.sk/i/jS1x3DVcYUCrW
-
By Elflight
Здравствуйте, коллеги!
Столкнулся с двумя проблемами при тестировании верстки на ipad'е, прошу совета.
1. Допустим, на странице есть картинка-ссылка и скрытый блок с position:absolute, который в видимом состоянии перекрывает эту картинку-ссылку. При тапе на некий триггер блок становится видимым, при тапе на самом блоке он прячется. И вот когда происходит касание блока, открытого над картинкой-ссылкой, то не только блок прячется, но и ссылка активизируется, т.е. происходит переход по ссылке. Как побороть такое поведение?
2. Эта проблема совсем мистическая. Есть классическое выпадающее горизонтальное меню на ховерах. На ipad'е была проблема с однозначностью работы (нужно, чтобы при первом касании пункта меню открывалось подменю, а при втором касании происходил переход по ссылке), сделал маленький скрипт:
$(document).ready(function() { $('.root-item, .root-item-selected').bind('touchstart', function() { if($(this).hasClass('menu_hover')) { return true; } else { $('.root-item, .root-item-selected').removeClass('menu_hover'); $(this).addClass('menu_hover'); return false; } });});т.е. при первом касании ссылки добавляем класс и переход блокируем, при втором (если класс присвоен, то это второй), класс убираем и переход разрешаем.
И все работает замечательно. НО только когда страница находится в верхнем положении прокрутки. Стоит прокрутить страницу на два миллиметра ниже, меню начинает прыгать и вести себя дико. Стоит прокрутить обратно наверх - опять работает нормально. Теряюсь в догадках. Подскажите, пожалуйста, куда копать?
-
-
Обсуждения
-
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ -
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ Портфолио https://www.behance.net/d4d4186e
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо.
-
Question
grrr
Всем привет!
Столкнулся с такой проблемой: На сайте у <fieldset> закруглены углы и изменен цвет рамки. Но на IPAD рамка вообще не отображается (Safari, Chrome).
Кто-нибудь сталкивался с подобной проблемой или знает что с эти можно сделать или как это отловить? (Может какие специализированные инструменты есть для подобных случаев).
Спасибо.
Link to comment
Share on other sites
1 answer to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.