CSS 媒体查询不适用于手机或平板电脑

Question

我刚刚使用 1&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 错误
$ 不是函数。（在“$（文档）”中，“$”未定义）

作为起点，最好先解决这些问题。

此外，如果我查看 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 媒体查询不适用于手机或平板电脑

CSS Media Queries not working on mobile or tablet

responsive-design

media-queries

mobile-website