Jump to content
  • 0
Sign in to follow this  
Валера Стакашкин

Гибкое и постоянное значение ширины, заливка в браузере

Question

Добрый день. сделал сайт Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

по алгоритму описанному здесь:

Вопросы:

1. При гибком 768 белый прямоугольник уводит страницу вниз, если его убрать все отображается нормально. Изменение параметров результата не дает.

2. Постоянный 1200, на планшете справа появляется полоса(как если что-то выступает за границу), если отключить серый прямоугольник(формат по ширине браузера), то все ОК. Изменение параметров результата не дает.

+ меню ведет себя не адекватно

3. Как правильно сделать заливку в браузере? на ПК все хорошо при "заполнении", но планшет и телефон не айс. Если ставлю "исходный" то планшет-телефон норм, только при скроллинге кратковременно появляется белая полоса.

p.s. Браузер везде использую Хром

Спасибо

Share this post


Link to post

1 answer to this question

Recommended Posts

  • 0
1 час назад, Валера Стакашкин сказал:

Вопросы:

1. При гибком 768 белый прямоугольник уводит страницу вниз, если его убрать все отображается нормально. Изменение параметров результата не дает.

Если пребывать в стереотипах и пытаться решать существующую проблему.

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

Можно добавить css код в HEAD для этого прямоугольника:
 

<style>
 .your_class_mame_or_object_ID {
 height: auto !important;
 padding-bottom: 20px;
 }
</style>

Этот код работает, но не всегда. Почему не всегда - сие мне неведомо. Должен работать всегда. Ну и в свойствах страницы (на этой точке остановки) задать минимальную высоту например 200 px.

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

Если вы планируете делать сайт используя точки остановки то:

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

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

Отключите:

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Белый прямоугольник, из-за которого сыр-бор, совершенно не нужен. Используйте заливку страницы и отступы колонтитулов.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.
1 час назад, Валера Стакашкин сказал:

Браузер везде использую Хром

Например, Хром не любит когда объекты растянуты на ширину страницы поверх объектов 100% ширины.  Проверяйте сначала в Firefox (обязательно) - если в этом браузере нет проблем, то с вероятностью 99%, верстка сделана у вас правильно. Дальше проверяете в Хроме и методом тыка (другого не существует) определяете причину проблемы и устраняете.

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

Всегда проверяйте на реальных устройствах. Хваленая эмуляция моб. устройств в хроме, на самом деле кривая, дальше некуда.

Share this post


Link to post

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
Sign in to follow this  

×
×
  • Create New...