iPhone 5有一個更長的屏幕，它沒有捕捉我的網站的移動視圖。什么是iPhone 5的新響應式設計查詢，我可以與現有的iPhone查詢結合使用嗎？我目前的媒體查詢是這樣的：@media only screen and (max-device-width: 480px) {}
3 回答
揚帆大魚
TA貢獻1799條經驗 獲得超9個贊
另一個有用的媒體功能是device-aspect-ratio。
請注意，iPhone 5的寬高比不是16：9。實際上是40:71。
iPhone <5：
@media screen and (device-aspect-ratio: 2/3) {}
iphone 5：
@media screen and (device-aspect-ratio: 40/71) {}
iPhone 6：
@media screen and (device-aspect-ratio: 375/667) {}
iPhone 6 Plus：
@media screen and (device-aspect-ratio: 16/9) {}
iPad的：
@media screen and (device-aspect-ratio: 3/4) {}
湖上湖
TA貢獻2003條經驗 獲得超2個贊
有這個，我贊同這個博客：
@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone 5 only */
}
請記住，它會對iPhone 5做出反應，而不是對所述設備上安裝的特定iOS版本做出反應。
要與現有版本合并，您應該能夠用逗號分隔它們：
@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone only */
}
注意：我沒有測試過上面的代碼，但之前我已經測試了逗號分隔的@media查詢，并且它們工作得很好。
請注意，以上可能會遇到其他一些具有相似比率的設備，例如Galaxy Nexus。這是另一種方法，它只針對一維640px（560px，由于一些奇怪的顯示像素異常）和一個960px（iPhone <5）和1136px（iPhone 5）之間的設備。
@media
only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
/* iPhone only */
}
- 3 回答
- 0 關注
- 903 瀏覽
添加回答
舉報
0/150
提交
取消