web--iPhone适配
来源:互联网 发布:ping 0端口 编辑:程序博客网 时间:2024/06/06 23:52
在网页中,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:2){/* 兼容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" />
使用JS
//通过高度来判断是否是iPhone 4还是iPhone 5或iPhone 6、iPhone6 PlusisPhone4inches = (window.screen.height==480);isPhone5inches = (window.screen.height==568);isPhone6inches = (window.screen.height==667);isPhone6pinches = (window.screen.height==736);
0 0
- web--iPhone适配
- web扣扣 for iphone
- Iphone开发中的web开发
- 创建离线IPhone Web App
- iphone web显示google地图
- iPhone调用web的方法
- web前端-iphone问题汇总
- Iphone Web开发meta说明
- 适配iphone
- iPhone适配
- iPhone 上的 Domino Web Access (iNotes) ~
- 用 Eclipse 开发 iPhone Web 应用程序
- 用 Eclipse 开发 iPhone Web 应用程序
- (转)用 Eclipse 开发 iPhone Web 应用程序
- 使用 Eclipse 调试 iPhone Web 应用程序
- 用 Eclipse 开发 iPhone Web 应用程序
- iPhone Android Web开发(概要)
- Build Web Apps for iPhone using Dashcode
- Android 6.0+ 运行时权限探索
- 用SwipeBackLayout实现滑动关闭当前Activity
- poj 2506 Tiling(大数+递推)
- Redis 安装
- 常量文件的写法-- UIKIT_EXTERN
- web--iPhone适配
- 以字节流读取文件时中文乱码解决(二)
- java的常量与变量
- gitlab 8.8.5分支保护和Webhooks、runners、tiggers的作用
- iOSpush到下一个页面,去掉tabBar占用页面的大小
- httpClient(Get)解析JSON
- Redis 配置
- <item> tag requires a 'drawable' attribute or child tag defining a drawab
- hdu5753Permutation Bo(排列问题)