如何为Galaxy Note 5编写媒体查询。

Question

我需要在三星Galaxy Note 5上同时适配横屏和竖屏模式的媒体查询代码。我使用了以下媒体查询，但我认为这不正确：

@media only screen and (max-width: 640px) and (orientation : landscape) {}

我是否漏掉了些什么，还是这个正确的？

- Yasser Moussa

---

无法根据设备编写媒体查询，但可以根据分辨率编写媒体查询。 - Vitorino fernandes

我对媒体查询不太熟悉，针对像Note设备或iPhone 6 Plus这样的比手机屏幕稍大的屏幕，有没有适用的完美代码？ - Yasser Moussa

我不确定我是否想要能够特定地针对设备。这听起来对我们开发人员来说像是地狱。 - Drew Kennedy

使用媒体查询来定义断点，使得内容重新排版更加合理，而不是针对特定设备进行定位。这样，当未来几个月内推出新设备时，您的网站仍将保持良好的外观。 - Matthew Darnell

Answer 1

试图追求每一个设备是愚蠢的行为。我并不是在称呼你是傻瓜，这只是一句俗语哈哈 ;) 设备会根据其最新的操作系统更新而频繁更改。因此，使用分辨率，并留出足够的误差来适应大多数设备。然而，如果你决定要执行这个任务，请使用以下方法：

/* Portrait and Landscape */
@media screen and (device-width: 360px) and (-webkit-device-pixel-ratio: 3) {}

只要您将宽度设置为100％，并且您的正文至少具有15px的间距，则您的宽度将相应地适应。

我的建议是使用响应式框架，例如Bootstrap，特别是Bootstrap4，它支持大型移动设备，例如iPhone6和Notes。

- LOTUSMS

---

我同意你的建议。顺便提一下，S5和Note 5不是同一款手机。 - showdev

好的，我已经把他引导到我认为有列出Note 5的链接。如果有人看了答案却不去查看链接，我会修正答案。发现得好！谢谢。 - LOTUSMS

Answer 2

如果你想尝试并针对特定设备进行编程，这是一个不错的网站。我会把信息发布出来，但是列表和数据库非常大。http://viewportsizes.com/

- Ty T.

---

你可以尝试仅显示所请求大小的规则？ - somethinghere

Answer 3

@media only screen and(max-width:360px)
{ 
    //code here..    
}

- Apoorv Mittal

---

请将以下与编程相关的内容从英语翻译成中文。仅返回翻译后的文本：不解释，不提供详细信息，格式错误...请在SO上查看一些好的答案示例，这不是其中之一。此外，Galaxy Note可能会报告超过360像素的宽度... - somethinghere