web app iphone4 iphone5 iphone6 響應式佈局適配代碼

時間 2019-12-06

標籤 web app iphone4 iphone iphone5 iphone6 響應佈局適配代碼欄目 HTML 简体版

原文原文鏈接

在網頁中，pixel與point比值稱爲device-pixel-ratio，普通設備都是1，iPhone 4是2，有些Android機型是1.5。]css

那麼-webkit-min-device-pixel-ratio:2能夠用來區分iphone(4/4s/5)和其它的手機web

iPhone4/4s的分辨率爲640*960 pixels，DPI爲是320*480，設備高度爲480pxiphone

iPhone5的分辨率爲640*1136 pixels，DPI依然是320*568，設備高度爲568pxspa

iPhone6的分辨率爲750*1334 pixels，DPI依然是375*667，設備高度爲667pxip

iPhone6 Plus的分辨率爲1242x2208 pixels，DPI依然是414*736，設備高度爲736pxit

那麼咱們只須要判斷iphone手機的device-height(設備高)值便可區別iPhone4和iPhone五、iPhone六、iPhone6 Plus

使用cssio

經過 CSS3 的 Media Queries 特性，能夠寫出兼容iPhone4和iPhone五、iPhone六、iPhone6 Plus的代碼~~class

方式一，直接寫到樣式裏面webkit

@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{}

}

方式二，連接到一個單獨的樣式表，把下面的代碼放在<head>標籤裏

<link rel="stylesheet" media="(device-height: 480px) and (-webkit-min-device-pixel-ratio:2)" href="iphone4.css" />

<link rel="stylesheet" media="(device-height: 568px)and (-webkit-min-device-pixel-ratio:2)" href="iphone5.css" />

<link rel="stylesheet" media="(device-height: 667px)and (-webkit-min-device-pixel-ratio:2)" href="iphone6.css" />

<link rel="stylesheet" media="(device-height: 736px)and (-webkit-min-device-pixel-ratio:2)" href="iphone6p.css" />

使用JS

//經過高度來判斷是不是iPhone 4仍是iPhone 5或iPhone 六、iPhone6 Plus

isPhone4inches = (window.screen.height==480);

isPhone5inches = (window.screen.height==568);

isPhone6inches = (window.screen.height==667);

isPhone6pinches = (window.screen.height==736);