来源：http://www.phptext.net/article_view.php?id=387

------------------------------------------------------------------------------------------------

文章摘要：
最近接触到一个项目由于客户要求的比较~~所以也参与了下，结果晋级了一下~~来和大家分享~~

现在满大街的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);

web app iphone4 iphone5 iphone6 iphone6 Plus响应式布局 适配代码的更多相关文章

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

    在网页中,pixel与point比值称为device-pixel-ratio,普通设备都是1,iPhone 4是2,有些Android机型是1.5.] 那么-webkit-min-device-pix ...

  2. 响应式布局及bootstrap（实例）

    说明: 这几天公司要求网站实现响应式布局,所以对响应式布局进行了相对全面的了解,并做了几个实例. 转载请注明源地址,谢谢^_^,http://www.cnblogs.com/liu-zhen/p/44 ...

  3. web前端响应式布局,自适应全部分辨率

    写phpd的我. 近期公司要弄个app关键是没有web开发,而我有比較闲,那就扛枪上阵吧. 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架.仅仅是简单 ...

  4. App响应式布局

    1.手机的响应式布局,所有的单位用rem来表示. 如:设计稿的宽度是750,则html标签的font-size=屏幕宽度/7.5.那么在网页中的尺寸 = 设计高上实际的尺寸/100. 把下面的代码作为 ...

  5. 移动Web之响应式布局的探讨

    响应式布局的探讨 响应式布局的两种方式 基于百分比的布局 例:Bootstrap 基于rem的布局 例:淘宝触屏版 这两种布局都需要依赖于CSS3的media query来设置布局断点(或者通过js监 ...

  6. Responsive Web CSS – 在线响应式布局创建器

    如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...

  7. 从零开始学 Web 之 移动Web（六）响应式布局

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. “教你如何玩转Web响应式布局” 的更多相关文章

    “教你如何玩转Web响应式布局” 的更多相关文章 网址:http://www.360doc.com/relevant/641896074_more.shtml

  9. 【css】25个漂亮的响应式布局的web设计【转】

    响应的web设计的做法是提高用户的浏览质量,并在不同设备上能够完美的浏览使用,就像大前端推出的D7主题.看看下面美丽的响应的网站布局,通过本文你会在以后的设计中找到响应的web设计的灵感. 1.Mar ...

随机推荐

  1. java你可能不知道的事(2)--堆和栈

    在java语言的学习和使用当中你可能已经了解或者知道堆和栈,但是你可能没有完全的理解它们.今天我们就一起来学习堆.栈的特点以及它们的区别.认识了这个之后,你可能对java有更深的理解. Java堆内存 ...

  2. iOS如何获取网络图片（三）有沙盒的

    沙盒 沙盒简介 默认情况下,每个沙盒含有3个文件夹:Documents, Library 和 tmp.因为应用的沙盒机制,应用只能在几个目录下读写文件 Documents:苹果建议将程序中建立的或在程 ...

  3. iOS--页面跳转(UITableView)

    本文只要实现运用(UITableView)表格实现页面的传值,同时运用了代理(委托)传值. 目录文件列表如下: AddressBookViewController.h #import <UIKi ...

  4. 在SQL中使用CLR提供基本函数对二进制数据进行解析与构造

      二进制数据包的解析一般是借助C#等语言,在通讯程序中解析后形成字段,再统一单笔或者批量(表类型参数)提交至数据库,在通讯程序中,存在BINARY到struct再到table的转换. 现借助CLR提 ...

  5. NTP服务器引起的上行带宽超大

    2014年2月11日,centos服务器突然上行带宽8M,耗光所有带宽,不能远程SSH登录维护. 到机房直接使用界面登录,安装iptraf,运行后选择 Statistical breakdowns - ...

  6. 未能正确加载 ”Microsoft.VisualStudio.Editor.Implementation.EditorPackate“包错误解决方法

    今天新来一个同事,帮他搭建开发环境.发现他的vs2012一打开就报错. 错误提示: 未能正确加载 "Microsoft.VisualStudio.Editor.Implementation. ...

  7. symfony2 安装并创建第一个页面

    1.安装和配置 参考 http://symfony.cn/docs/book/installation.html 使用安装工具: windows系统 Open your command console ...

  8. git之一

    1.Git是什么Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.Git 是 ...

  9. nav布局 在线演示 DIVCSS5

    <!doctype html> nav布局 在线演示 DIVCSS5 传统 div ul li布局导航条效果 网站首页 HTML教程 HTML入门 HTML5教程 CSS教程 CSS入门 ...

  10. Windows Phone 8.0 Updates 2 and 3模拟器更新

    2014年元旦后,微软发布了Windows Phone 8 Updates 2 and 3的模拟器更新,即系统版本号分别是8.0.10322和 8.0.10512.其中,在Update 3 Emula ...