Блог

Главная - Вопросы по программированию - Кликабельные элементы слишком близко друг к другу? Сайт удобен для мобильных устройств на мобильных устройствах, но не в Google Mobile Friendly Checkup

Кликабельные элементы слишком близко друг к другу? Сайт удобен для мобильных устройств на мобильных устройствах, но не в Google Mobile Friendly Checkup

#html #css

#HTML #css

Вопрос:

Домашняя страница моего сайта не удобна для мобильных устройств в Google mobile friendly Checkup, но она удобна для мобильных устройств на мобильных устройствах. Это URL-адрес, который показывает проблему. https://www.sarkariresultsin.info/

Я проверяю это здесь, на официальной странице Google: — https://search.google.com/test/mobile-friendly

Это показывает, что ваш сайт не подходит для мобильных устройств. Ошибки: —

  1. Кликабельные элементы слишком близко друг к другу
  2. Окно просмотра не установлено

Я удалил и добавил все части страницы, но где я нахожу проблему в этой части: — Здесь на странице у вас будет 9 столбцов, таких как последние результаты, Карточка подтверждения, Последние и другие. Это 9 столбцов в структуре таблицы в a <section> , и когда я удаляю эту таблицу со страницы, моя страница показывает, что она удобна для мобильных устройств.

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

Ответ №1:

Единственная проблема вашего сайта в том, что он не реагирует; добавьте несколько медиа-запросов здесь и там, чтобы убедиться, что ваш сайт выглядит удобным как в портретном, так и в альбомном режиме. Как вы указывали выше, вы должны сделать так, чтобы, скажем, когда высота окна просмотра больше ширины (другими словами, как только он переходит в портретный режим), количество отображаемых столбцов менялось с 3 на 1. Это всего лишь пример, но он, скорее всего, сделает ваш сайт более удобным для мобильных устройств.

Кроме того, я бы рекомендовал, после определенного момента, чтобы на панели навигации был значок гамбургера, чтобы равномерно распределять ссылки на вашем сайте. Пример этого: https://scotch.io/tutorials/building-a-morphing-hamburger-menu-with-css

Ответ №2:

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

Добавьте медиа-запрос после основных стилей в css-файле вашего сайта. Пример:

 @media (max-width: 767px){
   selector {
      /*styles*/
   }
}

Добавьте окно просмотра в head тег вашего сайта. Пример:

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

Ответ №3:

Вам нужно использовать медиа-запросы, но в первую очередь вам нужен тег viewport в метаинформации head.

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

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

Затем вы должны использовать медиа-запросы для изменения размеров, позиционирования, скрытия / отображения элементов в зависимости от их больших размеров экрана. Причина этого в том, что мобильные / мобильные телефоны могут загружать и обрабатывать меньше, чтобы отображать результаты для конечного пользователя. Большинство людей используют мобильные телефоны, когда они вне дома, у них меньше памяти, меньше вычислительной мощности и они не всегда подключены к высокоскоростному Интернету, такому как Wi-Fi. Вот одна из бесчисленных страниц статистики, показывающих использование Интернета на мобильном телефоне.