當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

iphone4/iphone5/iphone6/iphone6Plus响应式布局适配代码

發(fā)布時(shí)間：2025/5/22 HTML 46 豆豆

生活随笔收集整理的這篇文章主要介紹了 iphone4/iphone5/iphone6/iphone6Plus响应式布局适配代码小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

在網(wǎng)頁(yè)中，pixel與point比值稱為device-pixel-ratio，普通設(shè)備都是1，iPhone 4是2，有些Android機(jī)型是1.5。]

那么-webkit-min-device-pixel-ratio:2可以用來(lái)區(qū)分iphone(4/4s/5)和其它的手機(jī)

iPhone4/4s的分辨率為640*960 pixels，DPI為是320*480，設(shè)備高度為480px

iPhone5的分辨率為640*1136 pixels，DPI依然是320*568，設(shè)備高度為568px

iPhone6的分辨率為750*1334 pixels，DPI依然是375*667，設(shè)備高度為667px

iPhone6 Plus的分辨率為1242x2208 pixels，DPI依然是414*736，設(shè)備高度為736px

那么我們只需要判斷iphone手機(jī)的device-height(設(shè)備高)值即可區(qū)別iPhone4和iPhone5、iPhone6、iPhone6 Plus

使用css

通過 CSS3 的 Media Queries 特性，可以寫出兼容iPhone4和iPhone5、iPhone6、iPhone6 Plus的代碼~~

方式一，直接寫到樣式里面

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */.class{} }@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */.class{} }@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */.class{} }@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */.class{} }

方式二，鏈接到一個(gè)單獨(dú)的樣式表，把下面的代碼放在<head>標(biāo)簽里

使用JS

//通過高度來(lái)判斷是否是iPhone 4還是iPhone 5或iPhone 6、iPhone6 PlusisPhone4inches = (window.screen.height==480);isPhone5inches = (window.screen.height==568);isPhone6inches = (window.screen.height==667);isPhone6pinches = (window.screen.height==736);

---------------------------------------------------------------------------------------- viewport簡(jiǎn)單粗暴的方式：
<metaname="viewport"content="width=320,maximum-scale=1.3,user-scalable=no">
直接設(shè)置viewport為320px的1.3倍，將頁(yè)面放大1.3倍。
為什么是1.3？
目前大部分頁(yè)面都是以320px為基準(zhǔn)的布局，而iphone6的寬度比是375/320=1.171875，iphone6+則是414/320=1.29375
那么以1.29倍也就約等于1.3了。
----------------------------------------------------------------------------------------
ip6+的CSS media+query
@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){
}
@media(min-device-width:414px)and(max-device-width:736px)and(-webkit-min-device-pixel-ratio:3){
}
PS:也可以直接使用實(shí)際的device-width：如device-width:375px
在原有頁(yè)面的基礎(chǔ)上，再針對(duì)相應(yīng)的屏幕大小單獨(dú)寫樣式做適配。

轉(zhuǎn)載于:https://www.cnblogs.com/good2008/p/9430829.html

總結(jié)

以上是生活随笔為你收集整理的iphone4/iphone5/iphone6/iphone6Plus响应式布局适配代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： poj-2406（kmp水题）
下一篇： BZOJ1103: [POI2007]大