「全網站」移動瀏覽器和屏幕尺寸媒體查詢

我被要求用移動設備改造現有的網站。該網站建立在Wordpress Twenty11框架上，因此我決定使用該框架中的現有媒體查詢來構建移動版面。「全網站」移動瀏覽器和屏幕尺寸媒體查詢

現在，我的移動版面在任何桌面瀏覽器上看起來都很不錯，只是拖動寬度小於420px，但iPhone & Android移動瀏覽器無論如何都會加載全寬網頁。完整的網絡體驗，woot！

客戶不滿。希望移動設計能夠顯示在所有iPhone瀏覽器上。因此，現在我需要弄清爲什麼移動瀏覽器堅持以完整的桌面寬度顯示頁面，而完全忽略了移動CSS。

這裏是我的媒體查詢，下跌主要的style.css文件的底部：

@media (max-width: 800px) { 
/* Design starts to get a little more fluid */ 
} 

@media (max-width: 650px) { 
/* Design gets quite a lot more fluid, and columns start dropping off the edge to below  main content */ 
} 

@media (max-width: 450px) { 
/* Totally changed navigation for small viewports, main content takes up whole viewport */ 
}

所有這些做我想做什麼，當我手動調整臺式機上的瀏覽器窗口。當我在沒有用的基於iFrame的「iPhone模擬器」中測試它們時，它們也做我想要的。但到目前爲止，所有移動設備都固執地顯示全寬佈局，變得非常遙遠，難以辨認。

有什麼我應該加入到這些媒體查詢讓移動瀏覽器顯示移動CSS？或者我應該完全採用不同的策略，比如用戶代理檢測或類似的？

編輯補充：像這樣的東西線的header.php，我猜測：

<meta name="viewport" content="width=960, 
          maximum-scale=1.0">

其實應該

<meta name="viewport" content="width=device-width, 
          maximum-scale=1.0">

吧？

來源

2012-07-10 Ila

您應該爲媒體查詢添加min-width參數，因爲目前有一個小屏幕的用戶將從所有三個媒體查詢中獲取規則，因爲它的最大寬度將小於800像素。

@media (min-width: 651px AND max-width: 800px) { 
    ... 
} 

@media (min-width: 451px AND max-width: 650px) { 
    ... 
} 

@media (max-width: 450px) { 
    ... 
}

如果您試圖讓媒體查詢過於複雜，您將遇到大量問題。不同的瀏覽器以不同的方式處理它們，使得它們不適合生產環境。

我喜歡使用的方法是爲window.resize事件創建一個簡單的JS事件處理函數，該事件僅向<html>元素添加類以指定用戶所處的屏幕斷點。然後在你的CSS，你只是有斷點類前綴規則：

$(window).on('resize', function() { 
    var w = $(this).width(); 
    if (w > 1400) { 
     $('html').addClass('widescreen-viewport'); 
    } else if (w > 1024) { 
     $('html').addClass('desktop-viewport'); 
    } else if (w > 767) { 
     $('html').addClass('tablet-viewport'); 
    } else { 
     $('html').addClass('mobile-viewport'); 
    } 
});

對不起，jQuery的，但是這是一種方法，我知道肯定的作品。

然後你的CSS是這樣的：

#some-element { 
    /*default styles*/ 
} 
.widescreen-viewport #some-element { 
    /*widescreen styles*/ 
} 
.desktop-viewport #some-element { 
    /*desktop styles*/ 
} 
.tablet-viewport #some-element { 
    /*tablet styles*/ 
} 
.mobile-viewport #some-element { 
    /*mobile styles*/ 
}

這種方法，因爲它要求JS會收到更好的瀏覽器支持啓用，但除此之外，它會工作回到IE6/5.5和其他瀏覽器從那時候開始。

來源

2012-07-10 16:21:50 Jasper

我認爲這就是我想要的 - 例如：在800px，使左列浮動：無。在600px時，保持左列float：none，並使左列padding：0。在400px處，保持float：none和padding：0，並使font-size：11px;等等。所以每個較小的屏幕尺寸應該保持上面的樣式，並根據需要添加/覆蓋。 – Ila 2012-07-10 16:26:18

CSS使得這一點很棘手，因爲每次將一個類/規則添加到元素時，它都必須比最後一個更獨特，否則它將不會覆蓋舊的樣式。 – Jasper 2012-07-10 16:30:19

是的，但是當桌面瀏覽器窗口調整到<420像素時，我已經獲得了所有想要正常工作的樣式 - 問題在於移動瀏覽器仍然恢復爲全寬縮放佈局。將視口寬度更改爲設備寬度也沒有修復它。將嘗試JS作爲最後的手段！ – Ila 2012-07-10 19:00:15

「全網站」移動瀏覽器和屏幕尺寸媒體查詢

回答

相關問題