Html Galaxy S3 的 CSS 媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11036337/
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
CSS media queries for Galaxy S3
提问by Hymansbox
Anyone know how to target the Samsung Galaxy S3 with media queries?
有人知道如何通过媒体查询定位三星 Galaxy S3 吗？
Currently I use:
目前我使用：
iPad
iPad
<link rel="stylesheet" media="all and (device-width: 768px)" href="css/device-768.css"/>
Other tablet devices
其他平板设备
<link rel="stylesheet" media="all and (max-device-width: 767px) and (min-device-width: 641px)" href="css/device-max767.css"/>
Phones (S3 didnt use this - dont know why)
电话（S3 没有使用这个 - 不知道为什么）
<link rel="stylesheet" media="all and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1)" href="css/phones.css"/>
I also tested
我也测试过
<link rel="stylesheet" media="all and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="css/phones.css"/>
but it didnt work...
但它没有用...
回答by pieroxy
I have set up a page that shows you how any device will react to media queries by giving the values of the media features. Just visit the page with the device you want to test:
我已经设置了一个页面，通过提供媒体功能的值，向您展示任何设备将如何对媒体查询做出反应。只需访问包含您要测试的设备的页面：
http://pieroxy.net/blog/pages/css-media-queries/test-features.html
http://pieroxy.net/blog/pages/css-media-queries/test-features.html
From there, you can decide which media query you want to use based on what the different devices report. Remember it is generally a bad idea to target specific devices. You should rather target display sizes and density to make your website adapt to the surface at hand.
从那里，您可以根据不同设备报告的内容决定要使用的媒体查询。请记住，以特定设备为目标通常是一个坏主意。您应该以显示尺寸和密度为目标，以使您的网站适应手头的表面。
回答by Xman Classical
At this time, mobile devices have improved so much that their screen resolutions are similar and sometimes even better than desktop screens resolutions.
目前，移动设备的屏幕分辨率已经有了很大改进，有时甚至比桌面屏幕分辨率还要好。
For example Galaxy S4 of Samsung has 1080X1920 pixels - Full HD screen!
例如三星的 Galaxy S4 有 1080X1920 像素 - 全高清屏幕！
But in responsive design we check resolution and need to fit according the resolution and if you try to add media query, let's say min-width of 1000px and check it on the Samsung Galaxy S4 you will see that nothing happened.
但是在响应式设计中，我们检查分辨率并需要根据分辨率进行调整，如果您尝试添加媒体查询，假设最小宽度为 1000 像素，然后在三星 Galaxy S4 上检查它，您会发现什么也没发生。
The reason for it is that mobile high density screen have two aspect of pixels.
原因是移动高密度屏幕有两个方面的像素。
Real resolution The first resolution is the factory real resolution, it's mostly for videos and images. on Samsung galaxy S4 the real resolution is 1080X1920.
真实分辨率 第一个分辨率是出厂真实分辨率，主要用于视频和图像。在三星 Galaxy S4 上，实际分辨率为 1080X1920。
CSS resolution The second resolution is for the browser. and for us developers that means we need to act different and not according the real screen resolution. in Samsung Galaxy S4, CSS resolution is 360X640.
CSS 分辨率 第二个分辨率是针对浏览器的。对于我们开发人员来说，这意味着我们需要采取不同的行动，而不是根据实际的屏幕分辨率。在三星 Galaxy S4 中，CSS 分辨率为 360X640。
Samsung Galaxy S4 resolution: Real resolution: 1080X1920 CSS resolution: 360X640
三星 Galaxy S4 分辨率：真实分辨率：1080X1920 CSS 分辨率：360X640
How to acquire CSS resolution? In Wikipedia you have all mobile devices resolution table (tablet and mobile devices). http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
如何获取CSS分辨率？在维基百科中，您拥有所有移动设备分辨率表（平板电脑和移动设备）。http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
/*(ldpi) Android*/
@media only screen and (-webkit-device-pixel-ratio:.75){
/*CSS */
}
/*(mdpi) Android*/
@media only screen and (min-device-width : 480px) and (max-device-width : 800px) {
/*CSS */
}
/*(hdpi) Android*/
@media only screen and (-webkit-device-pixel-ratio:1.5){
/*CSS */
}
回答by Rowan
I used this to target just the portrait view on the s3:
我用它来定位 s3 上的纵向视图：
@media only screen and (min-device-width : 719px) and (max-device-width : 721px) and (-webkit-min-device-pixel-ratio : 2) and (orientation : portrait) {
}
回答by TheBlackBenzKid
Like mentioned before. Use this Media Query detectoron your handset and also consider using a better fluid design - CSS hacks are not good - you should not really need them in 90% of scenarios if you have a good fluid design.
就像之前提到的。在你的手机上使用这个媒体查询检测器，并考虑使用更好的流体设计——CSS hacks 不好——如果你有一个好的流体设计，你不应该在 90% 的场景中真正需要它们。
Samsung Galaxy S3
三星Galaxy S3
@media only screen and (max-device-width: 720px) and (orientation:portrait) {
.your-css{}
}
@media only screen and (max-device-width: 1280px) and (orientation:landscape) {
.your-css{}
}
回答by Jen-Lars
Samsung Galaxy S I & II: 320 x 533, in portrait mode (CSS pixel density is 1.5)
三星 Galaxy SI & II：320 x 533，纵向模式（CSS 像素密度为 1.5）
Samsung Galaxy S III: 360 x 640, in portrait mode
三星 Galaxy S III：360 x 640，纵向模式
回答by hsobhy
On my Samsung S3 with Android 4.1.2, while I tried all the media query features (max-height, width, device height and width and even color:8) only this worked for me in addition to the second answer abovein this page:
在使用 Android 4.1.2 的三星 S3 上，虽然我尝试了所有媒体查询功能（最大高度、宽度、设备高度和宽度，甚至颜色：8），但除了本页上面的第二个答案外，这对我有用：
Samsung S3 default browser
三星S3默认浏览器
/* Samsung S3 default browser portrait*/
@media only screen and (device-width: 720px) and (device-height: 1280px) and (orientation: portrait) {
body { background:yellow;}
}
/* Samsung S3 default browser landscape */
@media only screen and (device-width: 1280px) and (device-height: 720px) and (orientation: landscape) {
body { background:#000;}
}
Here is a screenshotfor the pieroxymedia query diagnostic tool test. Please notethat both work without orientation but don't change the propriety without load/refresh.
下面是截图的pieroxy媒体查询的诊断工具测试。请注意，两者都可以在没有方向的情况下工作，但不要在没有加载/刷新的情况下更改属性。
Hope this helps with no conflict with any other queries you might use
希望这有助于与您可能使用的任何其他查询没有冲突
回答by user2060451
This is tested and worked.
这是经过测试和工作的。
@media only screen and
(device-width: 720px) and
(device-height: 1280px) and
(-webkit-min-device-pixel-ratio: 2)
回答by bcm
I think this would safely apply to most phones of today (HTCs, iPhones, Samsung), while avoiding the common tablet widths (iPad iPad 3/4 iOS 6 has 672pxon portrait).
我认为这可以安全地应用于当今的大多数手机（HTC、iPhone、三星），同时避免常见的平板电脑宽度（iPad iPad 3/4 iOS 6纵向为672px）。
<link rel='stylesheet' href='/Styles/device_phone.css' media='screen and (max-width: 640px)'/>
This phone would be the odd fish:
这款手机将是奇怪的鱼：
Samsung Nexus S Android 2.3.6 Stock Browserwhich has width: 480px, height: 800px(max-width 800)
三星 Nexus S Android 2.3.6 Stock Browser宽度：480px，高度：800px（最大宽度 800）
It is generally not recommended to target specific devices, but if you really wanted to target the odd fish you could, since it has other unique attributes. I personally prefer using max-width as I can test direct on my desktop and wide screen, and I'm not fussed for users seeing the mobile view if they really did resize their browser to less than 640 wide.
通常不建议针对特定设备，但如果你真的想针对奇怪的鱼，你可以，因为它有其他独特的属性。我个人更喜欢使用 max-width ，因为我可以直接在我的桌面和宽屏幕上进行测试，如果用户真的将浏览器的大小调整到小于 640 宽，我不会对看到移动视图的用户大惊小怪。
Reference: http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html
参考：http: //pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html
回答by djdaniel150
Forget all this "max-device-width" "min-height", etc, quackery!The problem is you guys are not designing for the dimensions of the device. Also, the Galaxy S3 according to Samsung has a pixel density of 2, meaning that the physical screen maps out 1 device pixel to 2 CSS pixels. If this is true then the 720x1280 resolution is only a logical resolution and not the real physical resolution of the device! This is also the case with the Apple iphone 4 which has a specified resolution of 640x960px, which is actually the logical resolution and NOT the real resolution of the actual device. The real physical resolution for the iphone is half this number after taking into account pixel density, meaning its physical dimensions are actually 320x480, which is true since I use this code all the time!
忘记所有这些“最大设备宽度”“最小高度”等等，骗子！问题是你们不是为设备的尺寸设计的。此外，根据三星的说法，Galaxy S3 的像素密度为 2，这意味着物理屏幕将 1 个设备像素映射到 2 个 CSS 像素。如果这是真的，那么 720x1280 分辨率只是一个逻辑分辨率，而不是设备的真实物理分辨率！Apple iphone 4 的情况也是如此，它的指定分辨率为 640x960px，这实际上是逻辑分辨率，而不是实际设备的真实分辨率。考虑到像素密度后，iphone 的实际物理分辨率是这个数字的一半，这意味着它的物理尺寸实际上是 320x480，这是真的，因为我一直在使用这个代码！
Therefore, if the S3 also has a pixel density of 2, then its real native resolution is actually 360x640px, NOT 720x960 as Samsung stated. Again, the device maps out 2 CSS pixels to 1 device pixel! Also, why on earth are people use variable media queries, quackery I tell you!
因此，如果 S3 的像素密度也为 2，那么它的真实原始分辨率实际上是 360x640 像素，而不是三星所说的 720x960。同样，设备将 2 个 CSS 像素映射到 1 个设备像素！另外，为什么人们使用可变媒体查询，骗子我告诉你！
@media screen and (device-width: 360px) and (device-height: 640px) and (orientation: portrait) {
Styles go here }
样式在这里}
@media screen and (device-width: 640px) and (device-height: 360px) and (orientation: landscape) {
Styles here } OR: You can just state the logical resolution which was provided by Samsung, DuH!, Rocket science right?
这里的样式 } 或者：你可以说出由三星、DuH!、Rocket science 提供的逻辑解决方案，对吗？
@media screen and (width: 720px) and (height: 1280px) and (orientation: portrait) {
Styles }
样式 }
@media screen and (width: 1280px) and (height: 720px) and (orientation: landscape) {
Styles } Very simple! Thats all there is to it. And people wonder why they cant get media queries to work, yet they use all these variable values. Try actually targeting the resolution for the device. There's no reason on earth to ever use variable values such as "max-width", etc.
样式 } 很简单！这里的所有都是它的。人们想知道为什么他们不能让媒体查询工作，但他们使用了所有这些变量值。尝试实际针对设备的分辨率。地球上没有理由使用诸如“max-width”之类的变量值。
