设备宽度和设备高度答案

【问题标题】：device-width and device-height设备宽度和设备高度
【发布时间】：2017-02-08 17:41:25
【问题描述】：

需要帮助来了解我是否有如下预定义的设备宽度：

那我怎么知道设备高度呢？因为在一个页面站点上，它以一种方式显示在 768px x 900px 上，而另一种方式显示在 768px x 750px 上。

希望它有意义！

干杯，

桑德拉 P.

【问题讨论】：

您可以在媒体查询中请求orientation。例如@media screen and (orientation: landscape) { ... }。那是您正在寻找/要求的吗？另外，不要在媒体查询中使用device-width。你可能想要width而不是。
嗯，我知道如何将代码写入媒体查询，但我不知道从哪里获得这些数字（指的是设备高度像素）。因为我到处都可以找到 device-width 的值，但是如何在我的笔记本电脑上正确地测试它们呢？我应该如何调整浏览器的大小？我的屏幕是 1920 x 950。我应该如何测试响应式网站？
您可以简单地调整浏览器窗口的大小。或者你可以在开发者工具中使用 webkit/firefox 响应模式

【解决方案1】：

在响应式设计中，（实际上在一般网页设计中）根据高度来操作或更改界面的内容或外观并不推荐。

用户在浏览内容时通常会进行“向下滚动”移动。这在手持设备和台式计算机中都是一样的。

通过宽度管理内容是一种更好的方法，您实际上不需要知道高度。

我可以给出一个高度参考的小清单，但请记住，因为它并没有真正使用太多，所以它并不准确；

Extra small devices Phones (<640px)
Small devices Tablets (≥640px)
Medium devices Desktops (≥820px)
Large devices Desktops (≥900px)

另外，我强烈推荐 Google Chrome 开发者工具的响应式测试模块。除此之外，还有许多在线应用程序和工具包可以测试您的设计在不同尺寸的设备和屏幕尺寸上的视觉效果。

请注意，使用最流行的设备屏幕尺寸也可能是一种好方法。

这里列出了流行的手持设备及其高度；

查看此链接了解所有设备及其屏幕尺寸； http://mydevice.io/devices/

【讨论】：

【解决方案2】：

height 无所谓。设置 height:auto 为 html body 内容，根据宽度我们可以对齐 html body 内容中的组件。

【讨论】：