Веб-страница отлично смотрится на маленьких экранах только при уменьшении

0

Я создал шаблон с несколькими более "трудными" или проблемными функциями CSS, такими как панель навигации с фиксированной позицией, полноразмерная перелистываемость и другая позиция в столбце: фиксированный элемент также с прокруткой переполнения. Все размеры моего шрифта установлены в em.

Сайт выглядит идеально на больших экранах рабочего стола, но не меньше, то есть на большинстве ноутбуков. Но если вы уменьшаете масштаб изображения в браузере на меньшем экране (command/control-minus), он снова выглядит идеальным, фактически эквивалентным большему экрану. Проблемы при первой загрузке сайта на меньшем экране фактически идентичны чрезмерному масштабированию (возможно, 250%) на большем экране.

Большинство проблем, похоже, связаны с шириной: панель навигации с фиксированной позицией имеет текстовые ссылки, которые не могут быть уменьшены, поэтому у меня есть overflow-x: auto. Кроме того, есть центрированный столбец, который содержит все содержимое, чтобы визуально отличать его от фонового изображения, а его содержимое прерывается от чрезмерного масштабирования, потому что они становятся слишком широкими.

Как я могу правильно масштабировать страницу при уровне масштабирования браузера на 100%?

Я получаю чувство, что ответ является основополагающей концепцией CSS, которую я пропустил в понимании в своем самообучении, поэтому извиняюсь, если это кажется очевидным.

Спасибо.

  • 0
    Почему бы не прочитать тему адаптивного дизайна, а затем использовать Bootstrap 3?
  • 0
    Вы говорите об адаптивном дизайне.
Показать ещё 1 комментарий
Теги:

3 ответа

1

Возможно, это поможет. Поместите это в начало документа.

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

Редактировать:

Хотя это, вероятно, не решит вашу проблему. Это может быть кратковременное исправление, чтобы сделать ваш сайт пригодным для использования, пока вы не будете реагировать на весь ваш сайт.

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

Поделиться
  • 0
    Спасибо! Я сталкивался с этим раньше, и кажется, что это только для мобильных устройств, это так? Мобильное масштабирование было бы неплохо, но поддержка мобильных устройств вообще не является требованием проекта.
  • 0
    Я не уверен в этом. Есть еще несколько вариантов, которые вы могли бы использовать, но я не опубликовал. Вы должны будете сделать некоторые исследования. Попробуйте сеть разработчиков Mozilla. У них хорошая документация.
0

Я столкнулся с чем-то подобным. Для меня это потому, что мой сайт загружал шрифты Google через http://. Это хорошо работало в локальной системе, однако веб-сервер размещался по https, что означало, что ссылка на http://google font блокировалась браузером по соображениям безопасности. Это заставило сайт выглядеть немного меньше или больше.

Решение. Перейдите на https://для шрифтов google и других связанных URL.

Поделиться
0

Во-первых, у меня есть опыт, который вы делаете (что-то вроде position:fixed div), поэтому его сложно настроить для div или p s.

Поэтому вам нужно рассмотреть такое решение, чтобы элемент скрывал себя на экране слишком мало.

Например, обнаружите мобильный браузер и спрячьте его и т.д.

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

Проверьте это и посмотрите, подходит ли оно вам: обнаружение мобильных браузеров

Поделиться
  • 0
    Как вы думаете, эти советы для мобильных браузеров подойдут для экранов рабочего стола разных размеров?
  • 0
    Также определите размер экрана. you need to consider a solution such that the element will hide itself on screen too small , не так ли?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню