适配移动端 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{}

}

haley欢迎您来访本博客。此博客是作者在工作中的一个记事本,方便下次遇到同样问题时,以最快的速度解决掉遇到的问题。如果您发现哪里写的不对,欢迎给我留言,让我们一起进步。不胜感激!
posted @ 2016-06-13 20:29  HALEY168  阅读(1224)  评论(0编辑  收藏  举报

版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)

haley二维码

715560471@qq.com

qq:715560471