适配移动端 Android ios phone pc各版本的代码 媒体查询 横屏 竖屏

在网页中，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的代码~~

方式一，直接写到样式里面

@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:3){/* 兼容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" />
<link rel="stylesheet" media="min-width: 767px" href="pc.css" />

使用JS

//通过高度来判断是否是iPhone 4还是iPhone 5或iPhone 6、iPhone6 Plus

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

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

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

isPhone6pinches = (window.screen.height==736);
其他兼容
//竖屏时使用的样式
<style media="all and (orientation:portrait)" type="text/css">
#landscape { display: none; }
</style>
 
//横屏时使用的样式
<style media="all and (orientation:landscape)" type="text/css">
#portrait { display: none; }
</style>
 附：获取屏幕宽高（分辨率）的代码
  
 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
 7     <title>获取屏幕分辨率</title>
 8 </head>
 9 <body>
10 <script>
11      alert('屏幕宽度为：'+screen.width
12              +'，高度为：'+screen.height
13      );
14 </script>
15 </body>
16 </html>
序号 品牌 宽度 高度 备注
1 iphone7 375 603 me
2 索尼D6653 360 519 bo
3 魅族 360 567 awei
4 乐视max 480 782 huan
         
         
         
         
          
获取设备宽高的方法：
<script>alert("屏幕宽度:"+$(window).width()+"\n"+"屏幕高度:"+$(window).height());</script>

/* 宽度值依据上表获取 */

@media (device-width:480px){

  .class{}

}

posted @ 2016-06-13 20:29  HALEY168  阅读(1365)  评论(0)  编辑  收藏  举报