Question

<link rel="stylesheet" media="only screen and (max-width:1280px)" href="css/article1280.css">

我正在编写响应式CSS的代码，我意识到三星Galaxy S4智能手机的屏幕分辨率为1080x1920-my 23“显示器为1920x1080。我从未浏览过这款手机（我有一部iPhone） 3，分辨率为320x480，这是我认为所有智能手机都在周围，大约800像素宽的地方）所以我有点困惑。我应该如何创建一个智能手机的移动网站屏幕分辨率为1080x1920？

Answer 1

Galaxy S4向浏览器报告360px x 640px

宽高比为9/16

像素比率为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)

Answer 2

在这种情况下，您可能会发现一些有用的媒体查询：

@media screen and (orientation: portrait | landscape) { ... }

@media screen and (device-aspect-ratio: #/#) { ... }

以下是包含更多信息的链接：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 3

使用@media screen and (max-device-width: your dimension here)。

Answer 4

在GS4上进行设计时，除非在标题中使用视口标记，否则它将呈现为常规宽屏。我发布了用于使其响应的示例@ Samsung Galaxy S4 Responsive Design @media

Answer 5

确保您的head部分中包含视口元标记。像这样：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这告诉用户代理考虑像素密度并相应地重新缩放。所以你的1080px宽度三星Galaxy S4将像360px宽屏幕。

Answer 6

经过测试和工作！

@media screen and (-webkit-min-device-pixel-ratio: 3.0) and (max-width: 1080px), screen and (max-width: 480px)

@media：如果三星galaxy s4是1920x1080？

6 个答案: