判断4S，iphone5以及1080p的手机屏幕分辨率，加载不同的css怎么写？

html-css015

判断4S，iphone5以及1080p的手机屏幕分辨率，加载不同的css怎么写？,第1张

用if else来判断，给<script>设置一个ID，再根据setAttribute改变src的属性。

@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{}

}

分辨率可以从显示分辨率与图像分辨率两个方向来分类。

显示分辨率（屏幕分辨率）是屏幕图像的精密度，是指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多，所以分辨率是个非常重要的性能指标之一。

可以把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。显示分辨率一定的情况下，显示屏越小图像越清晰，反之，显示屏大小固定时，显示分辨率越高图像越清晰。

图像分辨率则是单位英寸中所包含的像素点数，其定义更趋近于分辨率本身的定义。

首先，在网页代码的头部，加入一行viewport元标签。原因不解释

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no">

选择加载CSS

<link rel="stylesheet" media="screen and (min-width:800px) and (max-device-width:1200px)" href="css/c1.css"/>

<link rel="stylesheet" media="screen and (min-width: 414px)" href="c2.css"  >

<link rel="stylesheet" media="screen and (max-width: 900px)" href="c3.css">

具体的根据需要自行测试修改吧