web app iphone4 iphone5 iphone6 响应式布局 适配代码

返回逐浪CMS技术讨论区
3回复贴,共1页,点击数:1890

现在满大街的APP,除了游戏,软件图形类的需要用原生开发好点。现在大多还是基于WEBAPP或者混合的hybrid app,大家都知道资讯类的小应用其实网页就可以胜任,当然如果你要调用一些应设备,原生的APP外hybrid app也是一个不错的选择。不过我们今天的主角是WEB APP,WEB APP好处就是,随时随地有网就能看,简单实用。对于开发来说,更是低成本高效率,当然对于追求细致的来说。。。就有点。。。。。好了,下面我们来看看WEB APP怎么区分iphone 4 5 6吧


在网页中,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 Plus

isPhone4inches = (window.screen.height==480);

isPhone5inches = (window.screen.height==568);

isPhone6inches = (window.screen.height==667);

isPhone6pinches = (window.screen.height==736);


现在满大街的APP,除了游戏,软件图形类的需要用原生开发好点。现在大多还是基于WEBAPP或者混合的hybrid app,大家都知道资讯类的小应用其实网页就可以胜任,当然如果你要调用一些应设备,原生的APP外hybrid app也是一个不错的选择。不过我们今天的主角是WEB APP,WEB APP好处就是,随时随地有网就能看,简单实用。对于开发来说,更是低成本高效率,当然对于追求细致的来说。。。就有点。。。。。好了,下面我们来看看WEB APP怎么区分iphone 4 5 6吧


在网页中,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 Plus

isPhone4inches = (window.screen.height==480);

isPhone5inches = (window.screen.height==568);

isPhone6inches = (window.screen.height==667);

isPhone6pinches = (window.screen.height==736);


现在满大街的APP,除了游戏,软件图形类的需要用原生开发好点。现在大多还是基于WEBAPP或者混合的hybrid app,大家都知道资讯类的小应用其实网页就可以胜任,当然如果你要调用一些应设备,原生的APP外hybrid app也是一个不错的选择。不过我们今天的主角是WEB APP,WEB APP好处就是,随时随地有网就能看,简单实用。对于开发来说,更是低成本高效率,当然对于追求细致的来说。。。就有点。。。。。好了,下面我们来看看WEB APP怎么区分iphone 4 5 6吧


在网页中,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 Plus

isPhone4inches = (window.screen.height==480);

isPhone5inches = (window.screen.height==568);

isPhone6inches = (window.screen.height==667);

isPhone6pinches = (window.screen.height==736);

1楼 2015/05/08 16:15

【原】iphone6来了,我该做点什么(兼容iphone6的方法)


呢?

相比iPhone5,iPhone6拥有更高分辨率的retina HD display,而iPhone6 plus的像素密度达到了401ppi,相比原来的326ppi,提升了25%,显示画面细节更丰富。

iPhone6 Plus设备高为736pt,宽为414pt,缩放比例为@3X,设备像素比(DevicePixelRatio,缩写DPR)为3.0,分辨率为2208*1242,在这个分辨率下渲染后,图像等比降低分辨率至1920*1080,下图来自paintcodeapp官网,解析iphone6 6plus分辨率:

iPhone6 plus的高清分辨率(1920*1080)让人感到担忧,而事实上这样的设备市场上早就有,如三星的Galaxy S4(分辨率:1920x1080;设备像素比:3.0),只是用户数并不庞大,webpp开发对它的适配也是从原始的iphone 4设计稿960*640做起,保证内容的正常展现。iPhone6 plus的出现是对它的进一步推动,而对视觉和前端无疑是一项新的挑战。

那么,我们是否要专门为iphone 6 plus 1920*1080的页面单独做一套适配呢?

让我们先看腾讯云分析2014年第二季度移动行业数据报告,该数据覆盖的设备超过15亿,是非常具有参考价值的,先了解android屏幕分辨率排名:

可以看出大屏手机是未来趋势,虽然这样,但减去大屏手机所占的比例,其它android手机所占比例为61.5%,也就是说目前窄屏手机占了绝大多数,再看高端的iphone机器比例:

iPhone 4 依然拥有最多的用户数,不容忽视它的价值。虽然大屏手机是趋势,但我们的视觉稿应该是适配大部分的设备,目前数据上看,960*640或1136*640依然是我们设计的规格,从最多用户数的设备进行设计,大屏手机正常展现,向前兼容,向后看齐,可以解决大部分问题。

那么,这对视觉稿的要求比较高,如果设计一套页面,在所有ios和android设备都展现良好,是不需要对iPhone6做适配的;如果展现效果一般(例如大屏手机下内容太小),需要对页面再进一步适配,可以理解为我们常说的响应式设计。

这里笔者在近期的资料想出一个方法,利用CSS媒体查询做兼容,仅供参考,是否存在问题还要等待iPhone 6的机器到手再做测试下,到时会更新文章反馈大家(内容更新于20140928,修改了设备像素比为3.0)~

@media (device-width:375px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone 6 */.class{}}
@media (device-width:414px) and (-webkit-min-device-pixel-ratio:3.0){/* 兼容iphone6 plus */.class{}}

适配这事情,还是要结合具体的项目,看老板的脸色,看用户的心思,总之,在开发的角度上看,提前做好准备,保证产品的质量和体验,搞不好老板就给你加薪~

 

有关retina显示屏的原理,之前写过一篇文章《高清显示屏原理及设计方案》,推荐大家阅读。

有关iPhone4和iPhone5的兼容,之前写过一篇文章兼容iPhone4和iPhone5的方法》。

 

参考资料:

iphone-6/specs

retina HD display

Confirmed iPhone 6 and 6 Plus viewport device-width

iPhone 6 and 6 Plus Responsive Breakpoints

iPhone 6 Screens Demystified

iPhone 6 Screens Demystified(中文图解)

Device pixel density tests

 

2楼 2015/05/08 16:17 收起回复

今天跟大家分享一组关于iphone 4系列,iphone5 系列和iphone6系列的屏幕尺寸对比图。

给我们的第一感觉就是:iphone手机的屏幕尺寸越来越大了!屏幕大是否真的好呢?

 

iPhone6

我们都知道苹果公司将会在2014年下半年上市2款新产品。

iPhone 6和iPhone Air于2014秋季上市和屏幕分辨率公布

官方最新iPhone6概念界面设计图和概念视频欣赏

iPhone6手机精美的UI界面设计欣赏

 

iphone 6的官方尺寸

一个5.5英寸显示IPHONE的屏幕(1920*1080像素,像素密度是401ppi

iphone mini一个4.7英寸(1334×750像素)显示屏,像素密度是326ppi

iphone 5和iphone 5s的官方尺寸

4英寸的iPhone 5S屏幕分辨率(1136×640像素)尺寸

iphone 4和iphone 4s的官方尺寸

3.5英寸

屏幕分辨率: 640×960像素

 

感觉苹果有像三星‘、htc 等安卓智能手机提供商靠近的趋势。都在生成大屏的手机。呵呵

3楼 2015/05/08 16:17 收起回复

好的

4楼 2015/05/08 17:01 收起回复
您未登录,没有发贴权限[点此登录]