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 */

@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 相容iphone6 Plus */

} 

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

      本文轉自Ansue  51CTO部落格，原文連結：http://blog.51cto.com/ansue/1639855，如需轉載請自行聯系原作者