web app iphone4 iphone5 iphone6 响应式布局 适配代码
在网页中，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 响应式布局 适配代码的更多相关文章
- web app iphone4 iphone5 iphone6 iphone6 Plus响应式布局 适配代码
来源:http://www.phptext.net/article_view.php?id=387 -------------------------------------------------- ...
- web前端响应式布局,自适应全部分辨率
写phpd的我. 近期公司要弄个app关键是没有web开发,而我有比較闲,那就扛枪上阵吧. 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架.仅仅是简单 ...
- App响应式布局
1.手机的响应式布局,所有的单位用rem来表示. 如:设计稿的宽度是750,则html标签的font-size=屏幕宽度/7.5.那么在网页中的尺寸 = 设计高上实际的尺寸/100. 把下面的代码作为 ...
- 移动Web之响应式布局的探讨
响应式布局的探讨 响应式布局的两种方式 基于百分比的布局 例:Bootstrap 基于rem的布局 例:淘宝触屏版 这两种布局都需要依赖于CSS3的media query来设置布局断点(或者通过js监 ...
- Responsive Web CSS – 在线响应式布局创建器
如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...
- 从零开始学 Web 之 移动Web（六）响应式布局
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- “教你如何玩转Web响应式布局” 的更多相关文章
“教你如何玩转Web响应式布局” 的更多相关文章 网址:http://www.360doc.com/relevant/641896074_more.shtml
- 【css】25个漂亮的响应式布局的web设计【转】
响应的web设计的做法是提高用户的浏览质量,并在不同设备上能够完美的浏览使用,就像大前端推出的D7主题.看看下面美丽的响应的网站布局,通过本文你会在以后的设计中找到响应的web设计的灵感. 1.Mar ...
- WEB前端响应式布局之BootStarp使用
1.Bootstrap简介:1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript 的 ...
随机推荐
- eclipse maven maven-archetype-webapp 创建失败
如果在eclipse中发现创建maven失败,大部分的原因是因为本地仓库坏了,或是少东西了,最直接的方法就时删掉重新下载就好了
- extarea输入的换行在网页上正常显示
如图
- Sublime Text 基础配置
作为一个码农,总有一款自己喜爱的编辑器.现今,我最喜欢的编辑器便是Sublime Text 3.其实很早便用了这款编辑器,大概是在两年前就开始用了吧.可总没有好好去学习下,很多很多功能不知道.今天下午 ...
- 利用反射实现通用的excel导入导出
如果一个项目中存在多种信息的导入导出,为了简化代码,就需要用反射实现通用的excel导入导出 实例代码如下: 1.创建一个 Book类,并编写set和get方法 package com.bean; p ...
- Web Service 的创建简单编码、发布和部署
最近,老大准备将已有的C/S架构项目中的通信部分做成通用,需要将其支持WebService为以后项目向着B/S架构升级做好铺垫,为此身为屌丝的我去各种百度WebService是个什么卵玩意,然后逐渐搭 ...
- Selenium 简单的例子
Selenium是一个web自动化验收测试框架. Selenium Client Driver - Selenium 2.0 Document http://seleniumhq.github.i ...
- ArrayList源码阅读笔记(基于JDk1.8)
关键常量: private static final int DEFAULT_CAPACITY = 10; 当没有其他参数影响数组大小时的默认数组大小 private static final Obj ...
- HoloLens shell overview(Translation)
HoloLens shell 概述 使用HoloLens时,shell是由你周围的世界和来自系统的全息图构成.我们可以称这个空间叫做混合现实(mixed world). 此shell由在你的世界里能让 ...
- jQuery 遍历函数
转载http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函 ...
- SOAPUI使用教程-REST请求工作
双击一个REST请求在导航打开的REST请求编辑器窗口: 就像相应的SOAP请求编辑器,这个窗口有以下几部分组成: 工具栏在顶部有标准动作的和端口的下拉菜单轻松修改服务端口 请求编辑器左侧有相应编辑视 ...