media jquery 适配ios不同手机

 

<meta content="target-densitydpi=320,width=640,user-scalable=no" name="viewport"> 

会自动根据dpi320和宽度640的比例,整体页面缩放改变效果


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


div{max-width:640px;min-width:320px;margin:0 auto;width:100%;height:100%;}






      本文转自Ansue  51CTO博客,原文链接:http://blog.51cto.com/ansue/1639855,如需转载请自行联系原作者





上一篇:手机芯片将进入10纳米时代


下一篇:手机玻璃中“诺基亚” 康宁最新一代大猩猩玻璃6