Question

我刚刚将我的网站上传到1＆amp; 1的托管服务器上。我遇到的问题是我似乎无法找出为什么我设置的媒体查询规则现在不起作用/被忽略。

我已经在我的iphone 5上进行了测试，但我的网站没有按照它应该进行扩展。但是，当我将桌面上的浏览器（Google Chrome）调整为平板电脑和移动设备尺寸时，它可以正确缩放。

有什么理由为什么当我调整浏览器大小时它运行得很好但是当我在移动设备上测试时它无法正常工作/缩放？

仅供额外信息我使用wordpress并通过functions.php文件以正确的方式包含我的css文件。

我的网站是www.jamieclague.com，请随时查看源代码。

感谢您提供任何帮助，非常感谢。

的header.php

<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo('title'); ?>Jamie Clague - Freelance</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!----- CSS Stylesheet Link ------>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" media="all" />
<?php wp_head(); ?>
</head>
<body>

CSS - styles.php（代码片段）

@media only screen 
and (min-device-width:401px)
and (max-device-width:480px){
   .header{
     min-height:520px;
   }
   .banner-matter {
    top: 22%;
    width:100%;
   }
   .banner-matter p {
    overflow: hidden;
    width: 100%;
   }

}

@media only screen 
and (min-device-width:321px)
and (max-device-width:400px) {

  .banner-matter h2 {
    font-size: 27px;
  }
  .banner-matter p {
    font-size: 20px;
  }
  a.more span {
    left: 30%;
  }

}

@media only screen
and (min-device-width:220px)
and (max-device-width:320px) {
    img.scroll {
       margin-top: -0.7em;
    }
    a.more {
       background-size: 92%;
       width: 180px;
       height: 64px;
       font-size: 1.15em;
    }
    .view {
      padding: 0.3em 0 0;
    }
    a.more span {
      left: 27%;
      top: 27%;
    }

}

Answer 1

更新

一些建议。

如果您使用网络检查器，您将看到许多404，包括
http://www.jamieclague.com/js/jquery.contentcarousel.js
http://www.jamieclague.com/js/jquery.mousewheel.js
http://www.jamieclague.com/wp-content/themes/portfolio/style.css
和来自第113行的jQuery错误 $不是一个功能。（在'$（document）'中，'$'未定义）

作为一个起点，修复这些是很好的。

另外，如果我查看http://www.jamieclague.com/wp-content/themes/portfolio/css/style.css?ver=4.6，我不确定你是否有从第1813行开始的语句的结束花括号

@media only screen and (max-width:993px){  
...

~~在文档的头部需要一个视口元标记，如果没有这个标记，移动设备的默认行为就是缩放页面以适合您的屏幕。~~

<击>
以下内容将帮助您入门。

<head> ... <meta name="viewport" content="width=device-width, initial-scale=1.0"> ... </head>

~~了解有关可以使用的设置的更多信息：http://www.w3schools.com/css/css_rwd_viewport.asp~~

祝你好运！

CSS媒体查询无法在移动设备或平板电脑上运行

1 个答案: