在网页中，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 响应式布局 适配代码的更多相关文章

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

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

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

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

  3. App响应式布局

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

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

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

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

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

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

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

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

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

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

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

  9. WEB前端响应式布局之BootStarp使用

    1.Bootstrap简介:1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript 的 ...

随机推荐

  1. Alipay秘钥问题

    有三种秘钥一个是应用公钥 一个是支付宝公钥 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco } span.s1 { text-d ...

  2. 10.OC中retainCount返回值不准的原因

    翻看该方法的参考文档,苹果对retainCount方法的描述如下: retainCount Do not use this method. (required) - (NSUInteger)retai ...

  3. 2. Add Two Numbers——Python

    题目: You are given two linked lists representing two non-negative numbers. The digits are stored in r ...

  4. VS2015 编译 Qwt6.1.3

    VS2015 + Qt5.7 编译 Qwt6.1.3 1. 将 qwtconfig.pri 中的 C:\Qwt 改为  D:/ProgramFiles/C_Library/Qwt/Qwt , 我的Qw ...

  5. VisualSVN Server的配置和使用方法（转）

    1.为什么要用VisualSVN Server,而不用Subversion? 回答: 因为如果直接使用Subversion,那么在Windows 系统上,要想让它随系统启动,就要封装SVN Serve ...

  6. php.exe php-cgi.exe php-win.exe的区别

    php.exe(linux下是php/bin/php)是提供来在命令行(命令行解释器)执行PHP文件的工具,比如你在有文件abc.php,那么你可以在CMD命令提示符下执行命令php.exe abc. ...

  7. godaddy1美元虚拟主机

    第一个域名是免费的 ftp连接:新建ftp账号,把配置文件导入相应的ftp客户端(user名可能有问题,使用非加密的模式) SSH连接: 1.开启SSH连接:http://godaddy.idcspy ...

  8. .NET开发人员必看：提高ASP.NET Web应用性能的24种方法和技巧

    那性能问题到底该如何解决?以下是应用系统发布前,作为 .NET 开发人员需要检查的点. 1.debug=「false」 当创建 ASP.NET Web应用程序,默认设置为「true」.开发过程中,设置 ...

  9. LeetCode 1. Two Sum

    Problem: Given an array of integers, return indices of the two numbers such that they add up to a sp ...

  10. xsl: normalize-space(string str) 函数

    本文出自http://technet.microsoft.com/zh-cn/magazine/ms256063%28VS.90%29.aspx 通过去掉前导和尾随空白并使用单个空格替换一系列空白字符 ...