我想为智能手机上的WP网站显示添加一个单独的。css。但是,当我在真实服务器上测试时,无法加载mobile.css文件。为什么?至少我发现的唯一一件事是,当我在头部标签中包含wp_head();
时,桌面style.css加载正常,但mobile.css加载不正常;当我删除wp_head
时,桌面一个不工作,但mobile.css工作!
这听起来不合理!但它正在发生。为什么?下面是我在header.php中使用的代码。省略了标题和脚本标签。
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="cleartype" content="on">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-device-width: 480px)" />
<title>...</title>
<script>...</script>
<?php wp_head(); ?>
</head>
我认为style.css已经通过functions.php加载,在functions.php中找到代码并删除它。代码类似于
function WordPress_resources() {
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'WordPress_resources');
remove device in (max-device-width: 480px) ----> to (max-width: 480px)
你需要添加模板目录
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/mobile.css" media="only screen and (max-width: 480px)" />