Форум пользователей Impera CMS
Impera CMS - отличный движок для лёгкого создания интернет магазина.
Обладает невероятным количеством функций, необходимых в онлайн торговле.

Как быстро проверить сайт на адаптивность?

Следить
Главная
19:49
11 мар
#
?
Обои написал:

Фрилансер Юля, которая представлена на сайте Имперы и делала дизайн шаблону eCommerce, сейчас выполняет нам адаптивную версию сайта на основе этого шаблона. Юля не разобралась с парой мелочей, прошу подсказать, вот что она пишет по этому поводу:

Все что могла исправила. По поводу кнопок "Купить в один клик",
"Уточнить детали" и увеличения картинки - не могу исправить,
не работает на главной странице и на карточке товара потому
что там, как я понимаю сам движок формирует дополнительный
скрипт - и на этой стадии ошибка. Тоесть лучше спросить у
разработчика. Так же не совсем корректно отображается виджет
вк - я не смогла найти где он подключается. Там нужно будет
убрать прописанный размер в iframe.

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

21:36
11 мар
#
Разработчик написал:

О кнопках На клиентской стороне вашего обновлённого сайта я заметил, что в файле http://ваш.сайт./design/eCommerce/js/script.js все функции, отвечающие за всплывание окон - это quickOrder, quickCallme, quickLightbox, quickLightboxPrev, quickLightboxNext, - находят своё окно по селектору точной подчинённости узлов. Например:

...
...
function quickOrder ( anchor ) {
    try {
        var box = document.querySelector('body > .quick-order');
        if (box != null) {
            ...
            ...

Однако Юлей были внесены изменения в вёрстку, и там где кнопки всплывающих окон перестали работать, там в DOM-е страницы теперь присутствует какая-нибудь обёртка (узел посредине), например [body] » [div.wrapper] » [div.quick-order]. Надо заменить селекторы в этих функциях нестрогими, например body .quick-order.


О виджете Виджет VKontakte подключается в файле eCommerce/html/catalog.htm шаблона, там есть код, где указана фиксированная ширина и высота виджета в пикселях.

...
...
<div id="vk_groups"></div>
...
...
<script>
    try {
        VK.Widgets.Group('vk_groups', {
            mode: 0,
            width: '344',
            height: '390',
            color1: 'FFFFFF',
            color2: '22AABB',
            color3: '22AABB'
        }, {$config->vk_group|default:0});
    } catch (e) { }
</script>
...
...

К месту будет сказано, так как виджет работает в DIV-контейнере с идентификатором vk_groups, размерами виджета в принципе можно было бы управлять из CSS так (это пример с адаптивностью):

...
...
div#vk_groups,
div#vk_groups iframe {
    height: 600px !important;
    width: 800px !important;
}

@media screen and (max-width: 799px) {
    div#vk_groups,
    div#vk_groups iframe {
        height: 240px !important;
        width: 320px !important;
    }
}

@media screen and (max-width: ...px) { ... }
...
...

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


О проверке Адаптивность сайта для всех базовых ширин экрана удобно проверять в респонсиваторе. Там сразу видно - где и что не так с выстраиванием элементов страницы.

Например, касаемо вашего сайта, посмотрите его на экране 800x... точек. Чтобы увидеть это, подставьте в ссылку ниже адрес вашего сайта.

http://imperacms.ru/responsivator?mode=wi-800x800&protect=0&url=http://ваш.сайт/

Блок вспомогательных ссылок, что присутствует в шапке сайта, выскочил под телефоны (а должен быть между телефонами и корзиной). То же происходит на экранах 854x..., 864x..., 900x..., 960x..., 1024x..., 1050x..., 1080x...1136x..., 1152x..., 1200x... точек.

09:53
12 мар
#
?
Обои написал:
Разработчик написал: О кнопках ... О виджете ...

Спасибо большое!!!!

Разработчик написал: О проверке ...

Ой как классно проверять, спасибо!

Написание ответа

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


Обратите внимание! Для противодействия спаму новые посты форума проявляются с задержкой от нескольких минут, пока не пройдут модерацию.


Хостинг для сайта

Хостинг для интернет магазина

Svai.net

Украина
г. Черкассы
5+ Заказать

TutHost.ua

Украина
г. Киев
Заказать

Mirohost.net

Украина
г. Киев
? Заказать

HyperHosting.com.ua

Украина
г. Винница
i подробнее Заказать

Agava.ru

Россия
г. Москва
Заказать

Ukraine.com.ua

Украина
г. Киев
5 Заказать
Импераготовасотрудничатьс провайдерами Важно Учтите Этот список перечисляет лишь некоторых хостинг-провайдеров, у которых существуют специальные тарифные планы для интернет магазинов, а сам список не означает, что другие провайдеры чем-то хуже.

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

Демо Главная Хронология Соглашение Материалы Контакты