在做手機網站的時候，我經常用百分比布局，但是經常在不同的手機顯示的不同

比如說，一樣的東西，在iphone4(s)、5(s)、6、plus中都會有不同顯示

有時候也想有為了某個手機單獨的做一些效果，來滿足不同客戶的要求

這時候，最方便的，我覺得應該是css3的 media query 而不是用javascript來判斷

吼吼。。。真是方便極了！！

下面的，是我匯總的一些常用 media? query 代碼，希望有幫助~? 上干貨！！

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */ } @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */ } @media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */ } @media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6+ */ } @media all and (orientation:landscape){ /* body {overflow:hidden;}.onResize {display:block;position:fixed;top:0;left:0;width:100%;z-index:999;background:url(../images/bodybg.jpg) #ccc center repeat;}.onResize img {width:50%;margin:10% auto;display:block;} 這是為了在手機橫屏的時候，彈出一個圖片，讓瀏覽者把手機數著看，樣式可以自己定義喲 */}

這就是常用的幾個電話，其他的我再慢慢搜集~

?

轉載于:https://www.cnblogs.com/Sinhtml/p/4846295.html

總結

以上是生活随笔為你收集整理的移动端常见的不同苹果手机media query汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。