Блог

Главная - Вопросы по программированию - Показывать текст для телефонов и планшетов, но не для настольных компьютеров

Показывать текст для телефонов и планшетов, но не для настольных компьютеров

#html #css #mobile-website

Вопрос:

У меня он работает на телефонах, но текст на рабочем столе отображается на планшете.

 @media all and (min-width: 768px) {
  .mobile {
    display: none !important;
  }
}

@media all and (max-width: 767px) {
  .desktop {
    display: none !important;
  }
}
 
 <h1 class="desktop">Desktop</h1>
<h1 class="mobile">Mobile</h1>

Ответ №1:

767 пикселей-это практически минимальная ширина планшета.

Вы, вероятно, тестируете на Ipad. Безопаснее всего установить его на 1024 пикселей.

Потому что обычно планшеты стоят от 768 до 1024.

Я предлагаю:

 #header nav li.mobile {
    display: none;
}

@media all and (max-width: 1023px) {
  #header nav li.mobile {
    display: inline-block;
  }
}

@media all and (max-width: 1023px) {
  #header nav li.desktop {
    display: none;
  }
}

Комментарии:

1. Извините, не получилось. Это действительно сломало некоторые вещи, которые работали. Я очень новичок в этом деле. Я провел всю ночь, просто добираясь до того места, где я сейчас нахожусь. Это та самая страница. mymammothtech.com/test.html

2. На рабочем столе текст гласит «Рабочий стол», а под ним есть 2 значка. На телефоне в тексте написано «Мобильный» и есть 3 значка. Когда я внесу ваши изменения, текст будет хорошим, но все значки появятся на обеих страницах. Я собираюсь внести в вас изменения и дать вам понять, о чем я говорю.

3. В случае, если вы пострадали от неправильных элементов спецификации. Попробуйте новый обновленный код. Отличная статья для вас: Специфика

4. В итоге я использовал app.urlgeni.us и с вашим кодом все работает!!! Спасибо!!!

Метки: ,