Как я могу улучшить читаемость моего сайта на мобильном телефоне?

Question

Кажется, что homepage / index.html достаточно честный, чтобы запустить его как есть. Но когда я смотрю на него из chrome на мобильном устройстве, все надписи слишком малы - особенно на панели навигации - и мой эффект параллакса также не работает на мобильном телефоне.

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

Вот ссылки на сайт и код на github:

https://ido -weddingsandevents.herokuapp.com / index.html

https://github.com/if-true/i_do_weddings_and_events/blob/master/index.html

Answer 1

В Bootstrap вы должны вставить <div class="row">...</div> внутрь class="container". Лучше использовать процент в .navigation { width: 100%; max-width: 500px; } для мобильной совместимости. Font-Awesome, PT Serif и Delius Swash Caps не используются. Загрузка их не подходит для производительности.

Если вы используете @media, настройте его следующим образом, , например,

.navigation li a { font-size: 24px; }
@media (min-width: 768px) {
  .navigation li a { font-size: 36px; }
}
@media (min-width: 992px) {
  .navigation li a { font-size: 60px; }
}
@media (min-width: 1200px) {
  .navigation li a { font-size: 72px; }
}

Важно использовать

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

Answer 2

Чтобы увеличить навигацию и заголовки изображений на мобильных устройствах, воспользуйтесь этим CSS:

@media (max-width: 860px){
.navigation li a {
    font-size: 80px;
}
.parallaxImage h2 {
    font-size: 56px;
    line-height: 94px;
}}