媒體查詢的iPad和移動

我正在設計personal page。我一直在使用Chrome Canary來確保我的所有媒體查詢都符合要求。一切都在Canary中顯示得非常好，所有需要的設備模式都能正常工作。但是，當我在iPad，iPhone或Blackberry上打開我的頁面時，它無法正確顯示。對於手機，「精選工作」部分下方的所有內容均不顯示。對於iPad，「精選作品」之後的所有內容都會顯示一個橫跨頁面寬度33.33％的單列。我不知道爲什麼。媒體查詢的iPad和移動

我的問題的TL; DR是我在我的HTML或CSS文件中丟失了什麼，添加後會幫助我的頁面在iPad和iPhone上正確顯示？

在我的HTML文件的頭，我用：

最初，只有媒體查詢，我已是：只有

@media屏幕（最大寬度：767px）

當我看到最初沒有iPad和iPhone上我加

@media只有屏幕和（分設備寬度：768px）工作，（最大設備寬度：1,024） {

@media只有屏幕和（最小 - 設備寬度：320像素）和（MAX-設備寬度：568px）{

當內工作的鉻，我感到一切正常顯示，直到圖像得小（800px左右）。頁面變小時會出現一些字體大小問題。我重構了頁面的底部部分（在Featured Work下面），並使用「僅限@media屏幕和（max-width：767px）」查詢執行此操作。

我真的很難爲什麼一切都顯示在我的iPad奇怪。我嘗試了不同的顯示方式：（flex，inline，box），以解決iPad問題。一切都無濟於事。

對於iPhone問題，我嘗試在「僅限@media屏幕和（max-width：767px）」下複製所有內容，並將其放在「@media only屏幕和（min-device-width：320px ）和（最大設備寬度：568px）「查詢。但那並不奏效。

我還沒有嘗試重寫我的整個CSS文件。我的想法是，因爲所有這些設備都具有預定義寬度，所以我可以將所有div寬度調整爲實際的px值而不是百分比。不過，我覺得這是不必要的工作。

來源

2014-10-30 C Bailey

你檢查出http://stephen.io/mediaqueries/？ – Sai 2014-10-30 03:19:47

感謝您的鏈接。我已經看到了該頁面，並且幫助創建了上述的iPad和iPhone特定查詢，但它並沒有幫助解決我的問題。 – 2014-10-30 03:27:22

試試這個：編輯，以適應邊緣...

.projectdeets { 
    width: 100%; 
    height: 30%; 
    display: inline-block; 
    max-height: 300px; 
} 
.project { 
    width: calc(33.33% - 6px); 
    height: 100%; 
    margin: 0px 3px 0px 3px; 
    float:left; 
}

來源

2014-10-30 03:45:12 Duetschpire

找到上面更新的答案。編輯以適應6px頁邊距 – Duetschpire 2014-10-30 03:59:16

是的！謝謝。這個問題現在已經解決了我的iPad。我最終在.project {width :;}下使用了32.74％。感謝iPad的幫助！ – 2014-10-30 04:05:59

很高興我能幫到你。我仍然相信寬度：calc（33.33％ - 6px）;對於所有> 1024像素的媒體查詢，即使在正常的顯示器上，也應該正常工作。 – Duetschpire 2014-10-30 04:09:04

媒體查詢的iPad和移動

回答

相關問題