iphone4/iphone5/iphone6/iphone6Plus响应式布局适配代码
生活随笔
收集整理的這篇文章主要介紹了
iphone4/iphone5/iphone6/iphone6Plus响应式布局适配代码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在網頁中，pixel與point比值稱為device-pixel-ratio，普通設備都是1，iPhone 4是2，有些Android機型是1.5。]
那么-webkit-min-device-pixel-ratio:2可以用來區分iphone(4/4s/5)和其它的手機
iPhone4/4s的分辨率為640*960 pixels，DPI為是320*480，設備高度為480px
iPhone5的分辨率為640*1136 pixels，DPI依然是320*568，設備高度為568px
iPhone6的分辨率為750*1334 pixels，DPI依然是375*667，設備高度為667px
iPhone6 Plus的分辨率為1242x2208 pixels，DPI依然是414*736，設備高度為736px
那么我們只需要判斷iphone手機的device-height(設備高)值即可區別iPhone4和iPhone5、iPhone6、iPhone6 Plus
使用css
通過 CSS3 的 Media Queries 特性，可以寫出兼容iPhone4和iPhone5、iPhone6、iPhone6 Plus的代碼~~
方式一，直接寫到樣式里面
方式二，鏈接到一個單獨的樣式表，把下面的代碼放在<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 6、iPhone6 PlusisPhone4inches = (window.screen.height==480);isPhone5inches = (window.screen.height==568);isPhone6inches = (window.screen.height==667);isPhone6pinches = (window.screen.height==736);---------------------------------------------------------------------------------------- viewport簡單粗暴的方式：
<metaname="viewport"content="width=320,maximum-scale=1.3,user-scalable=no">
直接設置viewport為320px的1.3倍，將頁面放大1.3倍。
為什么是1.3？
目前大部分頁面都是以320px為基準的布局，而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:也可以直接使用實際的device-width：如device-width:375px
在原有頁面的基礎上，再針對相應的屏幕大小單獨寫樣式做適配。
轉載于:https://www.cnblogs.com/good2008/p/9430829.html
總結
以上是生活随笔為你收集整理的iphone4/iphone5/iphone6/iphone6Plus响应式布局适配代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： poj-2406（kmp水题）
- 下一篇： BZOJ1103: [POI2007]大