CSS 三星 S7 媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38013700/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-30 12:01:22 来源:igfitidea点击:
Samsung S7 Media Queries
提问by Liron Paryente
I'm trying to use these media queries for S7 and it's not working any other recommendations?
我正在尝试将这些媒体查询用于 S7，但它没有任何其他建议？
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: portrait) {
/* Style */
}
回答by mlegg
I use this and haven't had a problem yet. Add all of this to your .css sheet
我用这个，还没有问题。将所有这些添加到您的 .css 表中
/*
Based on:
1. http://stephen.io/mediaqueries
2. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
*/
/* iPhone 6 in portrait & landscape */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
}
/* iPhone 6 in landscape */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {
}
/* iPhone 6 in portrait */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {
}
/* iPhone 6 Plus in portrait & landscape */
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) {
}
/* iPhone 6 Plus in landscape */
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) {
}
/* iPhone 6 Plus in portrait */
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait) {
}
/* iPhone 5 & 5S in portrait & landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
}
/* iPhone 5 & 5S in landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
}
/* iPhone 5 & 5S in portrait */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
}
/*
iPhone 2G, 3G, 4, 4S Media Queries
It's noteworthy that these media queries are also the same for iPod Touch generations 1-4.
*/
/* iPhone 2G-4S in portrait & landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
/* iPhone 2G-4S in landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {
}
/* iPhone 2G-4S in portrait */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) {
}
/* iPad in portrait & landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
}
/* iPad in landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
}
/* iPad in portrait */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}
/* Galaxy S3 portrait and landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {
}
/* Galaxy S3 portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Galaxy S3 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) {
}
/* Galaxy S4 portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Galaxy S4 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) {
}
/* Galaxy S5 portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Galaxy S5 landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* HTC One portrait and landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* HTC One portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* HTC One landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/*
iPad 3 & 4 Media Queries
If you're looking to target only 3rd and 4th generation Retina iPads
(or tablets with similar resolution) to add @2x graphics,
or other features for the tablet's Retina display, use the following media queries.
*/
/* Retina iPad in portrait & landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Retina iPad in landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Retina iPad in portrait */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/*
iPad 1 & 2 Media Queries
If you're looking to supply different graphics or choose different typography
for the lower resolution iPad display, the media queries below will work
like a charm in your responsive design!
*/
/* iPad 1 & 2 in portrait & landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* iPad 1 & 2 in 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 & 2 in portrait */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* iPad mini in portrait & landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* iPad mini in 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 mini in portrait */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Galaxy Tab 10.1 portrait and landscape */
@media
(min-device-width: 800px)
and (max-device-width: 1280px) {
}
/* Galaxy Tab 10.1 portrait */
@media
(max-device-width: 800px)
and (orientation: portrait) {
}
/* Galaxy Tab 10.1 landscape */
@media
(max-device-width: 1280px)
and (orientation: landscape) {
}
/* 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) {
}
/* Asus Nexus 7 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) {
}
/* Asus Nexus 7 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 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) {
}
/* Kindle Fire HD 7" 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) {
}
/* Kindle Fire HD 7" 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) {
}
/* Kindle Fire HD 8.9" 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) {
}
/* Kindle Fire HD 8.9" 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) {
}
/* Laptops non-retina screens */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Laptops 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 */
@media
(max-device-width: 42mm)
and (min-device-width: 38mm) {
}
/* Moto 360 Watch */
@media
(max-device-width: 218px)
and (max-device-height: 281px) {
}回答by Jonathan Vasiliou
Probably late to the party but, this is what I use for S7 and S8
可能迟到了，但这就是我用于 S7 和 S8 的
/*Galaxy S7 and S8 */
@media only screen and (min-device-width : 360px) and (max-device-width : 640px){
}
回答by Jmh2013
Add this to your <head>tag:
将此添加到您的<head>标签中：
<meta name="viewport" content="width=device-width, initial-scale=1">
This will tell the code to look at the actual pixel width of the devices viewport instead of the resolution value.
这将告诉代码查看设备视口的实际像素宽度而不是分辨率值。
回答by Ivan Potosky
I've run into the same problem just now.
After some testing on my device I've found that a device-pixel-ratio of 3is what targets my Galaxy S7.
我刚才遇到了同样的问题。
在我的设备上进行了一些测试后，我发现 3 的设备像素比是我的Galaxy S7 的目标。
Additionally, I've found that the address bar is 75px tall if you wanna line something up with the fold.
此外，我发现如果您想将某些内容与折叠对齐，地址栏的高度为 75 像素。
This was in the Chrome browser.
这是在Chrome 浏览器中。
回答by Saurab Pradhan
I used this and it worked
我使用了这个并且它起作用了
/* samsung s7 portrait */
@media
(-webkit-min-device-pixel-ratio: 3)
and (min-resolution: 192dpi)and max-width:640px){
}
/* samsung s7 landscape*/
@media
(-webkit-min-device-pixel-ratio: 3)
and (min-resolution: 192dpi){
}
