我的響應式設計不適用於Safari/iPhone 5s

我正在開發響應式設計，並開始使用firefox responsive design view與我的媒體查詢，他們都在使用它..但是當我開始在iphone5上使用safari時，沒有工作。我有我的頭標記我的響應式設計不適用於Safari/iPhone 5s

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> ...我錯過了一些需要在那裏爲Safari/iphone 5s？提前致謝！

我已經試過這些

/* iPhone 5 Retina regardless of IOS version */ 
@media (device-height : 568px) 
    and (device-width : 320px) 
    and (-webkit-min-device-pixel-ratio: 2) 
/* and (orientation : todo: you can add orientation or delete this comment)*/ { 
       /*IPhone 5 only CSS here*/ 
}

或@media screen嘗試：

@media screen and (device-aspect-ratio: 40/71) { 

}

來源

2014-10-06 Ris

據我所知，我認爲主要的響應框架看手機屏幕的寬度。也許嘗試利用此設定的規則：

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

http://getbootstrap.com/css/#grid-media-queries

http://foundation.zurb.com/docs/v/4.3.2/media-queries.html

來源

2014-10-06 18:09:56 EdwardM

在你的情況我會嘗試一些性差異就像

meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"

而且在CSS我會試試這個

@media (max-device-width: 640px) { your style }

來源

2014-10-06 18:32:46 Tomasz

考慮到iPhone 6和6+已經進入戰場（並且用戶仍在使用4S設備），不專注於專門針對iPhone 5的設計可能會更好。

這會更好地認爲設備agnostically和設計視窗的寬度。正如@Yoshi所說，正確指定視口將確保所有設備以預期的像素寬度顯示該網站。

雖然我會防止禁用縮放（通過指定最大比例）。這破壞了可供性，並且使得一些用戶難以與他們期望能夠與您的網站進行交互。

<meta name="viewport" content="width=device-width, initial-scale=1">

從那裏，你可以指定基於像素媒體查詢：

.item { width:25%; } 
@media screen and (max-width:750px) { 
    .item { width:33%; } 
} 
@media screen and (max-width:450px) { 
    .item { width:50%; } 
} 
@media screen and (max-width:250px) { 
    .item { width:100%; } 
}

這是一個項目將如何在不同的瀏覽器寬度適應一個很簡單的例子。

這種方法更加面向未來，因爲誰知道這些設備會出現多大或多小。祝你好運！ =）

來源

2014-10-07 10:55:32

我的響應式設計不適用於Safari/iPhone 5s

回答

相關問題