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無法在移動設備或平板電腦上工作

回答

相關問題