CSS не работает в мобильном представлении в WordPress даже после установки окна просмотра перед тегом <head> - PullRequest
Новая
       34

CSS не работает в мобильном представлении в WordPress даже после установки окна просмотра перед тегом <head>

0 голосов
/ 12 июня 2019

Я занимаюсь разработкой темы WordPress для консалтинговой компании.Но у меня проблема с CSS для мобильных устройств.

Я включил <meta name="viewport" content="width=device-width, maximum-scale=1"> перед окончанием тега <head>.Когда я проверяю отзывчивость в консоли Chrome, я получаю желаемый результат, но когда я тестирую его на реальном мобильном устройстве, отзывчивость не отображает ни одного моего медиазапроса, который я написал для каждого div.У меня есть следующий код для css и js в моем functions.php: 

function my_script_enqueue(){
    wp_enqueue_style('myStyle', get_template_directory_uri().'/css/main_styles.css', array(), '1.0', 'all');
    wp_enqueue_style('news', get_template_directory_uri().'/css/news.css', array(), '1.0', 'all');
    wp_enqueue_style('newsResponsive', get_template_directory_uri().'/css/news_responsive.css', array(), '1.0', 'all'); //File that contains media query code for news page.
    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap4/bootstrap.min.css',false,'1.1','all');
    wp_enqueue_style( 'fontAwesome', get_template_directory_uri() . '/plugins/font-awesome-4.7.0/css/font-awesome.min.css',false,'1.1','all');
    wp_enqueue_style( 'owlCarousel', get_template_directory_uri() . '/plugins/OwlCarousel2-2.2.1/owl.carousel.css',false,'1.1','all');
    wp_enqueue_style( 'carousel', get_template_directory_uri() . '/plugins/OwlCarousel2-2.2.1/owl.theme.default.css',false,'1.1','all');
    wp_enqueue_style( 'animate', get_template_directory_uri() . '/plugins/OwlCarousel2-2.2.1/animate.css',false,'1.1','all');
    wp_enqueue_style( 'video', get_template_directory_uri() . '/plugins/video-js/video-js.css',false,'1.1','all');
    wp_enqueue_style( 'responsive', get_template_directory_uri() . '/css/responsive.css',false,'1.1','all'); //File that contains media query code for whole website.
    wp_enqueue_script('jQuery', get_template_directory_uri().'/js/jquery-3.2.1.min.js', array(), '1.0', true);
    wp_enqueue_script('popper', get_template_directory_uri().'/css/bootstrap4/popper.js', array(), '1.0', true);
    wp_enqueue_script('bootstrap', get_template_directory_uri().'/css/bootstrap4/bootstrap.min.js', array(), '1.0', true);
    wp_enqueue_script('greensockTween', get_template_directory_uri().'/plugins/greensock/TweenMax.min.js', array(), '1.0', true);
    wp_enqueue_script('greensockTime', get_template_directory_uri().'/plugins/greensock/TimelineMax.min.js', array(), '1.0', true);
    wp_enqueue_script('scroll', get_template_directory_uri().'/plugins/scrollmagic/ScrollMagic.min.js', array(), '1.0', true);
    wp_enqueue_script('greensockAnimate', get_template_directory_uri().'/plugins/greensock/animation.gsap.min.js', array(), '1.0', true);
    wp_enqueue_script('greensock', get_template_directory_uri().'/plugins/greensock/ScrollToPlugin.min.js', array(), '1.0', true);
    wp_enqueue_script('owlCarousel', get_template_directory_uri().'/plugins/OwlCarousel2-2.2.1/owl.carousel.js', array(), '1.0', true);
    wp_enqueue_script('easing', get_template_directory_uri().'/plugins/easing/easing.js', array(), '1.0', true);
    wp_enqueue_script('video', get_template_directory_uri().'/plugins/video-js/video.min.js', array(), '1.0', true);
    wp_enqueue_script('youTube', get_template_directory_uri().'/plugins/video-js/Youtube.min.js', array(), '1.0', true);
    wp_enqueue_script('parallex', get_template_directory_uri().'/plugins/parallax-js-master/parallax.min.js', array(), '1.0', true);
    wp_enqueue_script('myJs', get_template_directory_uri().'/js/custom.js', array(), '1.0', true);
    wp_enqueue_script('newJs', get_template_directory_uri().'/js/new.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_script_enqueue');

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

ViewPort: 

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

Недавно я попытался сохранить свой код стиля внутри * 1016.* но это тоже не сработало.Есть ли что-нибудь, что связано с мобильными дружественными сайтами, кроме области просмотра?Что мне не хватает в моем коде?

Обновление: Код медиазапроса сработает, если я добавлю код между тегом <head> в <style>.Если я просматриваю исходный код, я получаю все мои файлы responsive.css, news_responsive.css, которые загружаются, но я не понимаю, почему не работает, если я связал файл, в который написала css.

...