CSS @media：如果三星 Galaxy s4 是 1920x1080？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16923561/
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
@media: if samsung galaxy s4 is 1920x1080?
提问by user2441996
<link rel="stylesheet" media="only screen and (max-width:1280px)" href="css/article1280.css">
I'm in the middle of coding my responsive CSS and I realized that the Samsung Galaxy S4 smartphone has a screen resolution of 1080x1920—my 23" monitor is 1920x1080. I've never browsed on this phone (I have an iPhone 3 with a resolution of 320x480 which is what I thought all smartphones were around, somewhere under 800 pixels wide) so I'm a bit perplexed. How am I supposed to create a mobile website for a smartphone with a screen resolution of 1080x1920?
我正在编写我的响应式 CSS 代码，我意识到三星 Galaxy S4 智能手机的屏幕分辨率为 1080x1920——我的 23" 显示器是 1920x1080。我从未在这款手机上浏览过（我有一部 iPhone 3为320x480的分辨率这是我认为所有的智能手机都是周围，下宽800个像素的地方），所以我有点困惑，我应该如何创建具有1080×1920的屏幕分辨率的智能手机移动网站？
回答by Brian P
Galaxy S4 reports 360px x 640px to the browser
Galaxy S4 向浏览器报告 360px x 640px
Aspect ratio is 9/16
纵横比为 9/16
Pixel ratio is 3
像素比为3
@media screen and (max-device-width: 360px)
@media screen and (-webkit-min-device-pixel-ratio: 3)
@media screen and (device-aspect-ratio: 9/16)
回答by skzryzg
Some media queries that you might find useful in this case are:
在这种情况下，您可能会发现一些有用的媒体查询是：
@media screen and (orientation: portrait | landscape) { ... }
@media screen and (device-aspect-ratio: #/#) { ... }
Here's a link with more info: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
这是包含更多信息的链接：https: //developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
回答by Daniel
use @media screen and (max-device-width: your dimension here).
使用@media screen and (max-device-width: your dimension here).
回答by Tyler Mammone
When designing on a GS4 it renders as a regular widescreen unless you use the viewport tag in your headers. I posted the example I use to make it responsive @ Samsung Galaxy S4 Responsive Design @media
在 GS4 上进行设计时，它会呈现为常规宽屏，除非您在标题中使用视口标签。我发布了我用来使其响应的示例@Samsung Galaxy S4 Responsive Design @media
回答by chasmani
Make sure you have the viewport meta tag in your head section. Something like this:
确保您的头部部分中有视口元标记。像这样的东西：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tells the user-agent to take into account the pixel density and rescale accordingly. So your 1080px width Samsung Galaxy S4 will act like a 360px width screen.
这告诉用户代理考虑像素密度并相应地重新缩放。因此，您 1080 像素宽的三星 Galaxy S4 将像一个 360 像素宽的屏幕。
回答by Aruna
Tested and working!
测试和工作！
@media screen and (-webkit-min-device-pixel-ratio: 3.0) and (max-width: 1080px), screen and (max-width: 480px)
