Блог

Главная - Вопросы по программированию - CSS не работает так же на мобильном устройстве, как на рабочем столе

CSS не работает так же на мобильном устройстве, как на рабочем столе

#javascript #php #html #jquery #css

#javascript #php #HTML #jquery #css

Вопрос:

это моя первая серьезная проблема, которую я не смог решить с помощью Google (что я и делаю, даже когда у меня уходит целый день на решение проблемы). Как уже упоминалось в теме, похоже, что CSS не загружен на мобильное устройство, но он отлично работает на рабочем столе (localhost XAMPP). Пока я работаю над проектом с использованием рабочего стола, все кнопки на slick-slider выглядят правильно, как это было установлено мной. Пока я проверяю страницу на live-сервере на мобильном устройстве, кнопки для использования ползунков выглядят как кнопки по умолчанию (на самом деле они действительно маленькие и за пределами ползунка, визуально это неприемлемо, даже если на них сложно нажать).

В разделе Head уже есть meta для мобильных устройств, а также установлен @import url() для мобильных устройств (но это не вносит никаких изменений):

 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css" media="all">@import url("slick/slick.css");</style>
  <style type="text/css" media="all">@import url("slick/slick-theme.css");</style>
  <link rel="stylesheet" type="text/css" href="$cssAddress">
  <title>$titleText</title> 
</head>

Раздел слайдера html:

 <div class="slickSlider">
  <div><img src="productImg/BK1.jpg" alt="First Slide" width="100%"></div>
  <div><img src="productImg/BK2.jpg" alt="Second Slide" width="100%"></div>
  <div><img src="productImg/BK3.jpg" alt="Third Slide" width="100%"></div>
</div>

Все скрипты находятся внутри тела

 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
    <script>
      $(document).ready(function(){
        $('.slickSlider').slick({
          dots: true,
          swipeToSlide: true,
          dotsClass: 'slick-dots',
          prevArrow: "<img class='a-left control-c prev slick-prev' src='img/arrowLeft.png'>",
          nextArrow: "<img class='a-right control-c next slick-next' src='img/arrowRight.png'>"
        });
      });
    </script>
<script src='js/product_page.js'></script>
<script src='js/burger.js'></script>

До сих пор я пробовал так много разных каруселей (например, bootstrap 4 carousel), которые также корректно работали на desktop (), также создал один самостоятельно, но я отказался от реализации прокрутки на мобильном устройстве.

Я также пытался реализовать CSS в мобильном медиа-запросе, но без каких-либо существенных результатов.

 @media screen and (max-width: 768px) {
  .slick-prev {
    left: 100px;
    background: red; /*to notice it, is white*/
}
.slick-next {
    right: 100px;
    background: red; /*to notice it, is white*/
}
}

Также я даю ссылку на веб-сайт, над которым я сейчас работаю, поскольку это может дать подсказку:
Пожалуйста, не обвиняйте меня во всем внешнем виде, поскольку сейчас он предназначен только для хорошей разработки, а не для конечного продукта, и только частично предназначен для рабочего стола. Я работал в основном над функциональностью веб-сайта (PHP и SQL).

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

ManhattanStyleBoutique

Спасибо, что прочитали сообщение, и, надеюсь, я найду какую-нибудь помощь, поскольку проблема с моим сайтом у меня уже почти 2 недели. Прошу прощения за мой английский синтаксис.

С уважением

Пэт

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

1. сколько пикселей видового экрана вы используете на мобильном устройстве? Это планшет? 768 пикселей — это сторона планшета. Большинство смартфонов имеют максимальную ширину окна просмотра 480 пикселей в ландшафтном режиме. Напоминаем, что для мобильных устройств 1px не равен 1px. Существует разница между пикселями внешнего вида и аппаратными пикселями.

2. Вы еще не внедрили слайдер по предоставленной вами ссылке.

3. Еще кое-что, о чем следует помнить, это кэширование. При тестировании на реальных мобильных устройствах (вместо настольных браузеров devtools в мобильных режимах), иногда может возникнуть проблема (например, SafarI), когда содержимое файла css кэшируется, несмотря на то, что его содержимое только что изменилось. Изменение фактического имени файла css приводит к его повторному кэшированию, но с этим может быть сложно справиться (и простое добавление ?_timestamp не работает в некоторых версиях Safari). Если вы можете управлять devtools на мобильном устройстве (планшете), то вы можете принудительно отключить кэш. Однако на телефонах … тьфу.

4. @tacoshy мобильное устройство — iPhone X с видовым экраном 375×812. Я попытался изменить медиа-запрос на 480 пикселей, но, похоже, это может не сработать прямо сейчас … как упоминал IncredibleHat

5. @IncredibleHat проблема все еще появляется даже через несколько часов после полного удаления и повторной вставки всего веб-сайта на живой сервер и после очистки веб-истории и остальной части на мобильном устройстве. На самом деле я думал, что это может быть проблема с кешем на стороне сервера, поэтому я связался с Bluehost, но они сказали мне, что мой сайт не подходит для мобильных устройств.