CSS Media Queries无法在移动设备或平板电脑上工作

我刚刚将我的网站上传到托管服务器上1 & 1.我遇到的问题是我似乎无法找出为什么我设置的媒体查询规则现在不是工作/被忽略。CSS Media Queries无法在移动设备或平板电脑上工作

我已经在我的iphone 5上进行了测试，但是我的网站并没有像应该那样扩展。但是，当我将我的浏览器（谷歌浏览器）在我的桌面上调整为平板电脑和手机尺寸时，它的尺寸正确。

是否有任何理由，当我调整我的浏览器的大小，它完美的作品，但当我在移动设备上测试它不能正常工作/缩放？

只是为了额外的信息我正在使用wordpress，并通过functions.php文件以正确的方式包含我的css文件。

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

感谢您的帮助，很apprciated。

的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%; 
    } 

}

来源

2016-08-29 user3060945

你试过用max/min-width替换max/min-device-width吗？ – Huangism

是的，事实上，我有这个开始。实际上，当我使用最大/最小宽度时，它可以在浏览器中正确缩放，但不能在设备上缩放。但是，当我使用最大/最小设备宽度时，它不能在浏览器或设备上正确缩放......我相信这是我必须忽略的小事吗？ – user3060945

你能描述它是如何不工作的吗？例如，使用iphone 5，宽度为320px。样式是使用不同的断点样式还是根本不工作？ – Huangism

更新

一对夫妇的建议。

如果使用网络督察，你会看到一些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
和jQuery的错误从线113
$不是一个函数。（在'$（document）'中，'$'未定义）

作为一个起点，解决这些问题是一件好事。

另外，如果我看着http://www.jamieclague.com/wp-content/themes/portfolio/css/style.css?ver=4.6，我不知道，如果你有这开始于行的语句结束的方括号1813

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

~~您在头部需要视meta标签你的文档，没有这个移动设备的默认行为将是缩放页面，以适应你的屏幕。~~

像下面这样会让你开始。

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

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

祝你好运！

来源

2016-08-29 18:42:54

感谢您的评论，但正如您从我的原始文章中看到的，我的header.php文件中包含了视口元标记 – user3060945

CSS Media Queries无法在移动设备或平板电脑上工作

回答

相关问题