标签：iphone 手机 设置屏幕 net dia 处理 target -- color
@media all and (min-width:1280px){ /* 所有设备宽度大于1280干嘛干嘛嘞... */ body{ background:#f00; } } @media (min-width:1280px){ /* 所有设备宽度大于1280干嘛干嘛嘞... */ body{ background:#f00; } } 其中all and可省略
@media print{ /*打印时设置的样式*/ body{ background:pink; } } 插曲: Lake Hillier is a lake in Western Australia that is completely and naturally PINK!!!
@media \0screen\,screen\9{ /*IE 8 、IE 7上场了*/ body{ background:#ccc; } } @media screen\9{ /*IE7来了*/ body{ background:#0f0; } }
指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，如iphone6/6s的分辨率：1334*750（这里的1像素指的是物理设备的1个像素点）其他机型的分辨率见http://blog.csdn.net/qq_27080247/article/details/78665450
iphone6/6s的deviceRatio为2（获取deviceRatio的方法见：https://www.w3cplus.com/css/towards-retina-web.html），此处有一公式：
window.devicePixelRatio = 物理像素/dips（CSS像素被称为与设备无关的像素----device-independent像素，简称为“DIPs”）
iphone6/6s的分辨率：1334*750
iphone6/6s的deviceRatio：2
因此:dips=667px*375px(也就是设备屏幕高度*宽度)，各浏览器的模拟器中展示的即为设备屏幕宽度*设置屏幕高度（css像素，获取方法：window.innerWidth*window.innerHeight）
iPhone6屏宽不一定是375px，iPhone6 Plus屏宽不一定是414px。
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的标准模式 } @media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 2) { //针对大多数iPhone6的标准模式 } @media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 3) { //针对所有iPhone6+的放大模式 } @media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio: 3) { //针对所有iPhone6+的标准模式,414px写为412px是由于三星Nexus 6为412px，可一并处理 }
参考：
http://blog.csdn.net/qq_27080247/article/details/78665450
https://www.w3cplus.com/css/towards-retina-web.html
http://blog.csdn.net/freshlover/article/details/44454991（判断iphone6 plus/iphone6标准及放大模式）
标签：iphone 手机 设置屏幕 net dia 处理 target -- color
原文地址：http://www.cnblogs.com/loveamyforever/p/7965994.html
