三星 Galaxy A20 视口尺寸答案

【问题标题】：Samsung Galaxy A20 Viewport size三星 Galaxy A20 视口尺寸
【发布时间】：2021-05-18 11:04:12
【问题描述】：

我必须为 Samsung A20 编写纵向和横向的自定义媒体查询，但我找不到 viewport。有人知道吗？（不适用于 A20s 或 A20e）。

谢谢

【问题讨论】：

在这个网站上询问特定硬件的大小几乎可以肯定是“离题”（verboten），但您可以直接找到视口大小...

标签： media-queries viewport samsung-mobile viewport-units mpmediaquery

【解决方案1】：

您可以在此处根据您的要求更改最小和最大宽度

@media only screen and (min-width: 200px) and (max-width: 414px) and (orientation : portrait) {
                    //Put your CSS here for 200px to 414px width devices (cover all mobile portrait width //        
              }
        
        
 @media only screen and (min-width: 500px) and (max-width: 767px) and (orientation:landscape) {
                    //Put your CSS here for 500px to 7674px width devices (cover all mobile landscape width //        
              }

【讨论】：

谢谢，但我正在搜索特定的视口而不是范围。我只为三星 A20 编写媒体查询，而我没有设备。
我认为视口应该是 360px 纵向和 640px 横向

【解决方案2】：

可以查询当前设备视口大小：

window.innerWidth
window.innerHeight

【讨论】：

【解决方案3】：

嗯，简而言之，如果您将目标定位到那里的每一个移动设备，那您几乎要疯了。因此，我作为前端开发人员的建议是，您应该始终寻找主要断点，并且永远不要忘记在媒体查询中从“最大宽度”开始......最大宽度将帮助您定位从 0 到 396 像素或396 像素到 768 像素。但是 min-width 允许从 396px 到 0。所以 max-width 是最好的选择和寻找移动设备的主要断点

【讨论】：

感谢您的回复和建议 :) 。实际上我正在寻找特定的 mq 因为是项目请求。通常我不会为每个设备编写一个 mq。我知道使用范围是接近 mq 的最佳方式，但在这种特定情况下，它不是解决方案。
好吧，Elena 也许我可以解决你的 MQ 问题。但是你能和我详细讨论一下你的问题吗？我最近在自己的投资组合网站上工作，并实施了与您所说的相同的策略。但在我的投资组合网站项目之后，我从老师那里学到，我们不应该针对每一个断点，而是针对一般的 BP（断点）。
另外，我建议您始终以一个 MQ 为目标并为其设置样式，并使其在宽度增加或减少时具有一定的呼吸空间。这意味着如果您的目标是最大宽度为 396 像素，那么如果宽度从 396 像素减小到 330 像素或 320 像素，请留出一些空间（在容器类中）来呼吸。大多数项目都可以用这种策略完成。它让我们可以做聪明的工作，而不是针对每个 BP 的艰苦工作。你心中还有疑惑吗？我很乐意解决您的问题。也许你可以在我的 Facebook 或 WhatsApp 上联系我。只需 Ping 我，我就会分享我的 WA。

【解决方案4】：

A20 肖像的媒体查询： @media only screen and (min-device-width: 320px) and (max-device-height: 694px)

（我对 WebKit 不太确定，但你可以试试 2.2）

和（-webkit-device-pixel-ratio: 2.2）

【讨论】：