商城网站的开发怎么做的,最新项目加盟代理,编写网站代码,.net响应式网站模板在网页中#xff0c;pixel与point比值称为device-pixel-ratio#xff0c;普通设备都是1#xff0c;iPhone 4是2#xff0c;有些Android机型是1.5。 那么-webkit-min-device-pixel-ratio:2可以用来区分iphone(4/4s/5)和其它的手机 iPhone4/4s的分辨率为640*960 pixels#…在网页中pixel与point比值称为device-pixel-ratio普通设备都是1iPhone 4是2有些Android机型是1.5。 那么-webkit-min-device-pixel-ratio:2可以用来区分iphone(4/4s/5)和其它的手机 iPhone4/4s的分辨率为640*960 pixelsDPI为是320*480设备高度为480px iPhone5的分辨率为640*1136 pixelsDPI依然是320*568设备高度为568px iPhone6的分辨率为750*1334 pixelsDPI依然是375*667设备高度为667px iPhone6 Plus的分辨率为1242x2208 pixelsDPI依然是414*736设备高度为736px 那么我们只需要判断iphone手机的device-height(设备高)值即可区别iPhone4和iPhone5、iPhone6、iPhone6 Plus 一、用CSS直接写到样式表里 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{}} 二、链接到一个单独的样式表把下面的代码放在head标签里 /* 兼容iphone4/4s */link relstylesheet media(device-height: 480px) and (-webkit-min-device-pixel-ratio:2) hrefiphone4.css //* 兼容iphone5 */link relstylesheet media(device-height: 568px)and (-webkit-min-device-pixel-ratio:2) hrefiphone5.css //* 兼容iphone6 */link relstylesheet media(device-height: 667px)and (-webkit-min-device-pixel-ratio:2) hrefiphone6.css //* 兼容iphone6 Plus */link relstylesheet media(device-height: 736px)and (-webkit-min-device-pixel-ratio:2) hrefiphone6p.css / 三、使用JS判断 //通过高度来判断是否是iPhone 4还是iPhone 5或iPhone 6、iPhone6 PlusisPhone4inches (window.screen.height480);/* 兼容iphone4/4s */isPhone5inches (window.screen.height568);/* 兼容iphone5 */isPhone6inches (window.screen.height667);/* 兼容iphone6 */isPhone6pinches (window.screen.height736);/* 兼容iphone6 Plus */转载于:https://www.cnblogs.com/eyed/p/7865165.html
