摘要：今天的一个小小的项目中，在各种手机上样式都显示正常，唯独iphone4s的有些许问题。产品经理又说iphone4s用户还挺多的，无奈，只能查一查iphone4s的media值，顺便做个小小总结;

直接上代码：

手机

  iphone

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */

@media only screen

  and (min-device-width: 320px)

  and (max-device-width: 480px)

  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */

@media only screen

  and (min-device-width: 320px)

  and (max-device-width: 480px)

  and (-webkit-min-device-pixel-ratio: 2)

  and (orientation: portrait) {

}

/* Landscape */

@media only screen

  and (min-device-width: 320px)

  and (max-device-width: 480px)

  and (-webkit-min-device-pixel-ratio: 2)

  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */

@media only screen

  and (min-device-width: 320px)

  and (max-device-width: 568px)

  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */

@media only screen

  and (min-device-width: 320px)

  and (max-device-width: 568px)

  and (-webkit-min-device-pixel-ratio: 2)

  and (orientation: portrait) {

}

/* Landscape */

@media only screen

  and (min-device-width: 320px)

  and (max-device-width: 568px)

  and (-webkit-min-device-pixel-ratio: 2)

  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */

@media only screen

  and (min-device-width: 375px)

  and (max-device-width: 667px)

  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */

@media only screen

  and (min-device-width: 375px)

  and (max-device-width: 667px)

  and (-webkit-min-device-pixel-ratio: 2)

  and (orientation: portrait) { 

}

/* Landscape */

@media only screen

  and (min-device-width: 375px)

  and (max-device-width: 667px)

  and (-webkit-min-device-pixel-ratio: 2)

  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */

@media only screen

  and (min-device-width: 414px)

  and (max-device-width: 736px)

  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */

@media only screen

  and (min-device-width: 414px)

  and (max-device-width: 736px)

  and (-webkit-min-device-pixel-ratio: 3)

  and (orientation: portrait) { 

}

/* Landscape */

@media only screen

  and (min-device-width: 414px)

  and (max-device-width: 736px)

  and (-webkit-min-device-pixel-ratio: 3)

  and (orientation: landscape) { 

}

Galaxy phone
/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */

@media screen

  and (device-width: 320px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 2) {

}

/* Portrait */

@media screen

  and (device-width: 320px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 2)

  and (orientation: portrait) {

}

/* Landscape */

@media screen

  and (device-width: 320px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 2)

  and (orientation: landscape) {

}

/* ----------- Galaxy S4 ----------- */

/* Portrait and Landscape */

@media screen

  and (device-width: 320px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */

@media screen

  and (device-width: 320px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 3)

  and (orientation: portrait) {

}

/* Landscape */

@media screen

  and (device-width: 320px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 3)

  and (orientation: landscape) {

}

/* ----------- Galaxy S5 ----------- */

/* Portrait and Landscape */

@media screen

  and (device-width: 360px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */

@media screen

  and (device-width: 360px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 3)

  and (orientation: portrait) {

}

/* Landscape */

@media screen

  and (device-width: 360px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 3)

  and (orientation: landscape) {

}


 HTC phone






/* ----------- HTC One ----------- */

/* Portrait and Landscape */

@media screen

  and (device-width: 360px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */

@media screen

  and (device-width: 360px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 3)

  and (orientation: portrait) {

}

/* Landscape */

@media screen

  and (device-width: 360px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 3)

  and (orientation: landscape) {

}






平板


Ipads






/* ----------- iPad mini ----------- */

/* Portrait and Landscape */

@media only screen

  and (min-device-width: 768px)

  and (max-device-width: 1024px)

  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */

@media only screen

  and (min-device-width: 768px)

  and (max-device-width: 1024px)

  and (orientation: portrait)

  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */

@media only screen

  and (min-device-width: 768px)

  and (max-device-width: 1024px)

  and (orientation: landscape)

  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 1 and 2 ----------- */

/* Portrait and Landscape */

@media only screen

  and (min-device-width: 768px)

  and (max-device-width: 1024px)

  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */

@media only screen

  and (min-device-width: 768px)

  and (max-device-width: 1024px)

  and (orientation: portrait)

  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */

@media only screen

  and (min-device-width: 768px)

  and (max-device-width: 1024px)

  and (orientation: landscape)

  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3 and 4 ----------- */

/* Portrait and Landscape */

@media only screen

  and (min-device-width: 768px)

  and (max-device-width: 1024px)

  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */

@media only screen

  and (min-device-width: 768px)

  and (max-device-width: 1024px)

  and (orientation: portrait)

  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */

@media only screen

  and (min-device-width: 768px)

  and (max-device-width: 1024px)

  and (orientation: landscape)

  and (-webkit-min-device-pixel-ratio: 2) {

}






Galaxy Tablets






/* ----------- Galaxy Tab 10.1 ----------- */

/* Portrait and Landscape */

@media

  (min-device-width: 800px)

  and (max-device-width: 1280px) {

}

/* Portrait */

@media

  (max-device-width: 800px)

  and (orientation: portrait) { 

}

/* Landscape */

@media

  (max-device-width: 1280px)

  and (orientation: landscape) { 

}






Asus Tablets






/* ----------- Asus Nexus 7 ----------- */

/* Portrait and Landscape */

@media screen

  and (device-width: 601px)

  and (device-height: 906px)

  and (-webkit-min-device-pixel-ratio: 1.331)

  and (-webkit-max-device-pixel-ratio: 1.332) {

}

/* Portrait */

@media screen

  and (device-width: 601px)

  and (device-height: 906px)

  and (-webkit-min-device-pixel-ratio: 1.331)

  and (-webkit-max-device-pixel-ratio: 1.332)

  and (orientation: portrait) {

}

/* Landscape */

@media screen

  and (device-width: 601px)

  and (device-height: 906px)

  and (-webkit-min-device-pixel-ratio: 1.331)

  and (-webkit-max-device-pixel-ratio: 1.332)

  and (orientation: landscape) {

}






Kindle Fire






/* ----------- Kindle Fire HD 7" ----------- */

/* Portrait and Landscape */

@media only screen

  and (min-device-width: 800px)

  and (max-device-width: 1280px)

  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */

@media only screen

  and (min-device-width: 800px)

  and (max-device-width: 1280px)

  and (-webkit-min-device-pixel-ratio: 1.5)

  and (orientation: portrait) {

}

/* Landscape */

@media only screen

  and (min-device-width: 800px)

  and (max-device-width: 1280px)

  and (-webkit-min-device-pixel-ratio: 1.5)

  and (orientation: landscape) {

}

/* ----------- Kindle Fire HD 8.9" ----------- */

/* Portrait and Landscape */

@media only screen

  and (min-device-width: 1200px)

  and (max-device-width: 1600px)

  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */

@media only screen

  and (min-device-width: 1200px)

  and (max-device-width: 1600px)

  and (-webkit-min-device-pixel-ratio: 1.5)

  and (orientation: portrait) {

}

/* Landscape */

@media only screen

  and (min-device-width: 1200px)

  and (max-device-width: 1600px)

  and (-webkit-min-device-pixel-ratio: 1.5)

  and (orientation: landscape) {

}






笔记本电脑


LapTaps






/* ----------- Non-Retina Screens ----------- */

@media screen

  and (min-device-width: 1200px)

  and (max-device-width: 1600px)

  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- Retina Screens ----------- */

@media screen

  and (min-device-width: 1200px)

  and (max-device-width: 1600px)

  and (-webkit-min-device-pixel-ratio: 2)

  and (min-resolution: 192dpi) {

}






可穿戴设备


Apple watch






/* ----------- Apple Watch ----------- */

@media

  (max-device-width: 42mm)

  and (min-device-width: 38mm) { 

}






 Moto 360 Watch






/* ----------- Moto 360 Watch ----------- */

@media

  (max-device-width: 218px)

  and (max-device-height: 281px) { 

}






微信页面的适配






@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */}

@media only screen and (max-device-width :480px){ }

@media only screen and (min-device-width :481px){ }

/**/

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ }

/*6+*/

@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ }

/*魅族*/

@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ }

/*mate7*/

@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ }

/*4 4s*/

@media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ }






参考： https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
												


											
【原】CSS3 Media在常用设备的设置值的更多相关文章
	

    
								
  1. 使用CSS3 @media 设置页面自适应
		
    参考CSS3 @media 查询 如果文档宽度小于 300 像素则修改背景演示(background-color): @media screen and (max-width: 300px) { bo ...
    
		
    2. 
						
  2. [转]CSS3 Media Query实现响应布局
		
    讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...
    
		
    3. 
						
  3. css3 media媒体查询器用法总结
		
    随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...
    
		
    4. 
						
  4. css3 media媒体查询器用法总结 兼容ie8以下的方法
		
    总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml  ...
    
		
    5. 
						
  5. CSS3@media媒体查询
		
    CSS3@media媒体查询 定义 media媒体查询, 当文档宽度变化时, 就可以根据文档宽度的变化来运用样式,不同的宽度应用不同的样式 使用 @media 查询,你可以针对不同的媒体类型定义不同的 ...
    
		
    6. 
						
  6. 转: CSS3 @media 用法总结
		
    一.首先是<meta>标签 <meta name="viewport" content="width=device-width, initial-sca ...
    
		
    7. 
						
  7. css3 media媒体查询器用法总结（附js兼容方法）
		
    css3 media媒体查询器用法总结 标签:class   代码   style   html   sp   src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...
    
		
    8. 
						
  8. CSS3 media媒体查询器的使用方法
		
    最近几年随着响应式布局的发展,一次开发多次使用,自适应屏幕的响应式网站的需求越来越多.但是怎样使得网站能自适应屏幕呢?这里就需要提到一个css3里面新增的技术了-media媒体查询器. 那么什么是me ...
    
		
    9. 
						
  9. 使用CSS3 Media Queries实现网页自适应
		
    原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【转】java.util.ResourceBundle使用详解
			
    原文链接:http://lavasoft.blog.51cto.com/62575/184605/ 人家写的太好了,条理清晰,表达准确.   一.认识国际化资源文件   这个类提供软件国际化的捷径.通 ...
    
			
    2. 
						
  2. PagerAdapter 用法
			
    PagerAdapter简介 PagerAdapter是android.support.v4包中的类,它的子类有FragmentPagerAdapter, FragmentStatePagerAdap ...
    
			
    3. 
						
  3. 0924Linux常用命令
			
    写的不错 转载了,有需要的同学们,可以多多学习,适合小白哦 http://blog.csdn.net/xiaoguaihai/article/details/8705992/ 关于最后增加一点 tar ...
    
			
    4. 
						
  4. SpringMVC学习--springmvc和mybatis整合
			
    简介 springMVC是表现层,service充当业务层,mybatis作为持久层,通过spring将这三层整合起来.如下图: 第一步:整合dao层 mybatis和spring整合,通过sprin ...
    
			
    5. 
						
  5. 通过HttpUrlConnection下载文件并显示进度条
			
    实现效果: 核心下载块: int count = 0; URL url = new URL("http://hezuo.downxunlei.com/xunlei_hezuo/thunder ...
    
			
    6. 
						
  6. 【BZOJ 4636】蒟蒻的数列
			
    http://www.lydsy.com/JudgeOnline/problem.php?id=4636 DCrusher贡献的题目 看了他的博客,有两种做法,动态开点线段树和离线操作离散化区间线段树 ...
    
			
    7. 
						
  7. flex布局无法自动适应的bug以及实现textarea根据内容自适应
			
    -webkit-box布局无法自动适应高度的bug css3的新属性display:-webkit-box带来了前端开发自动适应布局的春天 ,但是我发现这个布局有个问题, 而且这个问题我无法解决: 描 ...
    
			
    8. 
						
  8. DOS常用命令收集（长期更新）
			
    命令列表 命令 说明 ASSOC 显示或修改文件扩展名关联. ATTRIB 显示或更改文件属性. BREAK 设置或清除扩展式 CTRL+C 检查. BCDEDIT 设置启动数据库中的属性以控制启动加 ...
    
			
    9. 
						
  9. HTTP 405 错误 – 方法不被允许 (Method not allowed)
			
    HTTP 协议定义一些方法,以指明为获取客户端(如您的浏览器或我们的 CheckUpDown 机器人)所指定的具体网址资源而需要在 Web 服务器上执行的动作.则这些方法如下: 介绍 OPTIONS( ...
    
			
    10. 
						
  10. Linux基础3（用户/组管理，rpm，yum，源码安装软件）
			
    用户管理 与用户相关的配置文件 /etc/passwd /etc/shadow /etc/skel /etc/defalut/useradd /etc/login.defs useradd userm ...
    
			
    11.