时间戳

首页 > 解决方案 > 即使在标记之前设置视口后，CSS 也无法在 WordPress 的移动视图中工作

wordpress - 即使在标记之前设置视口后，CSS 也无法在 WordPress 的移动视图中工作

问题描述

我正在为一家咨询公司开发 WordPress 主题。但是，我对移动设备的 CSS 有问题。

我在标签<meta name="viewport" content="width=device-width, maximum-scale=1">结束之前包含了。<head>当我在 chrome 控制台中检查响应时，我得到了想要的结果，但是当我在真实的移动设备中测试它时，响应没有显示我为每个 div 编写的任何媒体查询。css我的andjs中有以下代码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');

当我在互联网上寻找解决方案时，我发现我需要在脑海中设置视口。我尝试保留以下所有内容，希望它能解决问题，但事实并非如此。

视口：

<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">

最近，我尝试将我的样式代码保留在其中，<style>但这也不起作用。除了视口之外，还有什么与移动友好网站有关的吗？我的代码中缺少什么？

更新：如果我<head>在<style>. 如果我查看源代码，我会responsive.css, news_responsive.css加载所有文件，但我不明白如果我链接了 css 写入的文件，为什么它不起作用。

标签： wordpressresponsiveviewportmeta

解决方案

推荐阅读