媒体查询判断ipad和iPhone各版本

/* 判断ipad */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px){
/* style */
}

　　

/* ipad横屏 */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape){
/* style */
}

　　

/* ipad竖屏 */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait){
/* style */
}

　　

/* 判断iphone5 *//* 横屏竖屏判断方法与ipad一样 */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px){
/* style */
}

　　

/* 判断iphone4-iphone4s *//* 横屏竖屏判断方法与ipad一样 */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
/* style */
}

　　

/* iphone5分辨率 */
screen Width = 320px (css像素)
screen Height = 568px (css像素)
screen Width = 640px (实际像素)
screen Height = 1136px (实际像素)
Device-pixel-ratio:2

　　

/* iphone4-iphone4s分辨率 */
screen Width = 320px (css像素)
screen Height = 480px (css像素)
screen Width = 640px (实际像素)
screen Height = 960px (实际像素)
Device-pixel-ratio:2

　　

时间： 2024-07-30 08:33:32

媒体查询判断ipad和iPhone各版本的相关文章

基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏

function orient() {if (window.orientation == 90 || window.orientation == -90) {//ipad.iphone竖屏:Andriod横屏$("body").attr("class", "landscape");orientation = 'landscape';return false;}else if (window.orientation == 0 || window.o

css3媒体查询判断移动设备横竖屏

/* 设备竖屏时调用该段css代码 */ @media all and (orientation : portrait){ body{ background-color:blue; } } /* 设备横屏时调用该段css代码 */ @media all and (orientation : landscape){ body { background-color:red; } }

【前端】响应式媒体查询

响应式媒体查询 媒体查询 从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持.如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型.清单 1 展示了一个示例. 清单 1. 使用媒体类型 <link rel="stylesheet" type="text/css" href="site.css" media="screen" /> <link rel="stylesheet&

媒体查询ipad,pc端

媒体查询 /* 判断ipad */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px){ #logo{ display: none; } } pc端 @media (min-width: 1024px){ #logo{ display: none; } 代码撸走,快去测试吧,阿西吧....

媒体查询（pc端，移动端不同布局）

媒体查询语法: 1.内联写法:and之后必须有空格@media screen and (min-width:960px //判断浏览器大小条件){body{background:red} //常规的样式} 2.外联写法:当满足屏幕满足条件的时候连接href后的css文件<link='stylesheet' media='screen and (min-width:960)' href='xx.css'/><link='stylesheet' media='screen and (min-

css3属性+布局+媒体查询

1.flex属性 flex-grow:;数字不带单位,定义项目剩余的宽度进行扩张(放大) flex-shrink:;数字不带单位,项目总宽度超出容器时的缩小设置              0 本身的大小,不缩小也不放大             1 平均分配,默认值 flex-basis: 0%;项目的长度 综合写法:    felx:放大 缩小 长度; 一般后两者默认不写 2.多列布局: column-count:;分列 column-gap:;列间距 column-rule:大小 形态 颜色;

iPhone CSS media query（媒体查询）

iPhone5  iPhone6  iPhone6Plus iPad设备 media query(媒体查询)代码. iPhone < 5: @media screen and (device-aspect-ratio: 2/3) {} iPhone 5: @media screen and (device-aspect-ratio: 40/71) {} iPhone 6: @media screen and (device-aspect-ratio: 667/375) {} iPhone 6Pl

iPhone的CSS3媒体查询

iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { /*iPhone 6 Portrait*/ } @media only screen and (min-device

iPhone系列设备媒体查询：

这就引出一个问题,我们在对iPhone设备适配时候,又多出几种情况.iPhone系列设备媒体查询: @media only screen and (min-device-width: 320px){ //针对iPhone 3 } @media only screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) { //针对iPhone 4, 5c,5s, 所有iPhone6的放大模式,个别iPhone6