iphone4/iphone5/iphone6/iphone6Plus响应式布局适配代码

在网页中，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);

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

viewport简单粗暴的方式：<metaname="viewport"content="width=320,maximum-scale=1.3,user-scalable=no">
直接设置viewport为320px的1.3倍，将页面放大1.3倍。
为什么是1.3？
目前大部分页面都是以320px为基准的布局，而iphone6的宽度比是375/320=1.171875，iphone6+则是414/320=1.29375
那么以1.29倍也就约等于1.3了。
----------------------------------------------------------------------------------------ip6+的CSS media+query
@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){
}
@media(min-device-width:414px)and(max-device-width:736px)and(-webkit-min-device-pixel-ratio:3){
}
PS:也可以直接使用实际的device-width：如device-width:375px
在原有页面的基础上，再针对相应的屏幕大小单独写样式做适配。

转载于:https://www.cnblogs.com/good2008/p/9430829.html

iphone4/iphone5/iphone6/iphone6Plus响应式布局适配代码相关推荐

web app iphone4 iphone5 iphone6 iphone6 Plus响应式布局适配代码
来源:http://www.phptext.net/article_view.php?id=387 -------------------------------------------------- ...
移动端响应式布局通用代码
移动端响应式布局通用代码 @charset "utf-8"; body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form, ...
在html中写响应式布局的代码,CSS实现响应式布局的方法
用CSS实现响应式布局响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中 ...
在html中写响应式布局的代码,手机端自适应响应式框架，移动端响应式布局代码...
移动端自适应框架,响应式布局,如何实现移动端不同分辨率的手机?在本文能够详解,响应式布局是HTML5和css的结合是必然,但是很多朋友不知道怎么实现不同分辨率下的手机端,自适应框架在本站也有,但是具体 ...
Vue2实现响应式布局方案
1.可以实现Vue移动端和PC端的响应式布局适配实现方法:通过 postcss-px-to-viewport 来自动将我们开发时的px单位计算转换为vw视口单位,完成响应式布局 . 安装插件 npm ...
浅谈html5 响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本. 这个概念是为解决移动互联 ...
css响应式布局_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
window safari 怎么进入响应式_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
前端开发——移动端及响应式布局解决办法总结（适配）
问题分析:前端开发一个产品(网站.系统.APP等)会遇到的一个难点就是适配问题,比如开发一个网站,你在一个页面开发的时候从视觉看起来没什么异样,换个不同分别率的设备,电脑,手机等,发现样式全乱了,这个 ...

iphone4/iphone5/iphone6/iphone6Plus响应式布局适配代码

iphone4/iphone5/iphone6/iphone6Plus响应式布局适配代码相关推荐

最新文章

热门文章