【原】CSS3 Media在常用设备的设置值
摘要：今天的一个小小的项目中，在各种手机上样式都显示正常，唯独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在常用设备的设置值的更多相关文章
- 使用CSS3 @media 设置页面自适应
参考CSS3 @media 查询 如果文档宽度小于 300 像素则修改背景演示(background-color): @media screen and (max-width: 300px) { bo ...
- [转]CSS3 Media Query实现响应布局
讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...
- css3 media媒体查询器用法总结
随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...
- css3 media媒体查询器用法总结 兼容ie8以下的方法
总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml ...
- CSS3@media媒体查询
CSS3@media媒体查询 定义 media媒体查询, 当文档宽度变化时, 就可以根据文档宽度的变化来运用样式,不同的宽度应用不同的样式 使用 @media 查询,你可以针对不同的媒体类型定义不同的 ...
- 转: CSS3 @media 用法总结
一.首先是<meta>标签 <meta name="viewport" content="width=device-width, initial-sca ...
- css3 media媒体查询器用法总结（附js兼容方法）
css3 media媒体查询器用法总结 标签:class 代码 style html sp src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...
- CSS3 media媒体查询器的使用方法
最近几年随着响应式布局的发展,一次开发多次使用,自适应屏幕的响应式网站的需求越来越多.但是怎样使得网站能自适应屏幕呢?这里就需要提到一个css3里面新增的技术了-media媒体查询器. 那么什么是me ...
- 使用CSS3 Media Queries实现网页自适应
原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不 ...
随机推荐
- js简易函数性能测试器
如果你不想用浏览器的js性能测试工具,可以用下面这个简单的函数测试一下(1毫秒一下的就测不出来了) function testFn(fn,param){ var start = new Date(). ...
- DeviceFamily XAML Views（一）
DeviceFamily Veiws 可以为特定的设备(Mobile.Desktop等)制作特定的XAML视图,这种方式可以完全定制XMAL和共享后台代码. 以 Mobile 和 Desktop 为例 ...
- Java Little Knowledge
1.Constructor running order of Base class and Derived class This is Alibaba's audition problem. clas ...
- C程序两则
<span style="font-size:24px;">#include<iostream> using namespace std; int *fun ...
- 自定义CoordinatorLayout Behavior 隐藏Footer View
在用新的控件中,我们可以用Toolbar与CoordinatorLayout实现 向上滚动隐藏的效果,可是官方并没有找到向上隐藏底部导航的功能,有一些第三方的框架实现了. 在Android M,Coo ...
- [转]servlet中的service, doGet, doPost方法的区别和联系
原文地址:http://m.blog.csdn.net/blog/ghyg525/22928567 大家都知道在javax.servlet.Servlet接口中只有init, service, des ...
- leetcode 235. Lowest Common Ancestor of a Binary Search Tree
Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in the BS ...
- UOJ34 多项式乘法
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...
- Android成长日记-使用PagerAdapter实现页面切换
Tip:此方式可以实现页面切换 1. 创建view1.xml,view2.xml,view3.xml,main.xml 在main.xml中创建 <android.support.v4.view ...
- discuz /faq.php SQL Injection Vul
catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 . 通过获取管理员密码 . 对管理员密码进行破解.通过在cmd5.com ...