问题标签 [device-width]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - Phonegap Android screen.height 和 screen.width 返回黑色系统栏空间
我使用 Phonegap for Android 开发应用程序。
在其中一些应用程序中，我使用 javascript 进行一些动态计算并将元素放置在屏幕上。
该应用在 config.xml 中使用全屏首选项
到目前为止，这一直运作良好，但今天我注意到一个应用程序内容位于底部的黑色 android 系统栏后面（带有后退按钮的系统栏等）。如果我转动风景，它也会在酒吧后面。
检查，我发现在横向模式下，例如，screen.width为我的设备返回640，而之前它曾经返回620。所以现在看起来它包括系统栏空间？
如何检测该值是否包含系统栏空间？我怎么知道系统栏占用了多少空间？
应用程序的行为在没有重新编译的情况下发生了变化。所以外部的东西影响了它的行为。几天前，这款手机进行了 Android 更新。也许与此有关。
手机使用的是安卓 5.0.2。升级到 Android 5.0.2 后，它运行良好。然后是另一个较小的更新，但它没有更改 Android 版本号。该设备是 Moto G。
感谢您对此的任何帮助。我真的需要能够在没有该系统栏使用的空间的情况下获得屏幕宽度和高度，直到现在一直如此。
android - 来自不同浏览器 (Android) 的不同媒体查询断点通常应该是什么？
我在华为 Ascend Y330/Android 4.2 中使用六种不同的浏览器测试了媒体查询，得到了 mqtest.io 报告的三种不同的设备宽度结果。
对于每个浏览器，然后我使用 css 在我自己的 html 页面上测试了实际断点，例如：
@media only screen and (max-device-width: 320px)-- 并通过更改像素值直到出现格式更改。所有六种情况下的设备宽度都与 mqtest.io 报告的设备一致。
显然，问题是由于浏览器不一致而无法控制设计。这是“本地”问题还是使用时的一般问题@media？
根据 mqtest.io 和网页测试的结果
Dolphin 和 Android 默认浏览器
device-width: 480px
device-height: 800pxOpera 和 Google Chrome
设备宽度
：320 像素设备高度：534 像素Firefox 和 Firefox Beta
设备宽度
：320 像素设备高度：533 像素屏幕：480x800
像素比：1.5（由 mqtest.io 报告的所有六种浏览器）
android - 如果超出设备宽度，则强制 ViewGroup 的子级移动到下一行
我想要一个视图组，它可能有一些水平放置在一起的视图。我的代码的问题是，一切都很好，但是当孩子人数越来越多时，所有孩子水平放置在一起并超过设备宽度。如果它们超出设备宽度，我需要强制它们移动到下一行。
这是我的代码：
注意：linear_layout_container视图组包含所有视图，它们都是视图组的子视图linearLayout。
css - CSS 媒体查询方向和纵向设备宽度逻辑
我有两个 div，我将其称为 A & B。所需的行为是：
- 如果屏幕宽度小于 400px，则只有 A 应该是可见的。
- 如果横向屏幕，宽度大于 400px，但纵向小于 400px，则只有 B 应该是可见的。
- 否则（纵向和横向屏幕宽度均大于 400 像素），A 和 B 都应该可见。
第二项是被证明是有问题的。
我目前的方法适用于 iOS 设备，无论当前屏幕方向如何，它总是将min-device-width&max-device-width作为纵向值device-width报告，但不适用于 android 和其他值随方向变化的其他设备：
是否可以纯粹在媒体查询中实现此行为，以便它适用于所有设备？
如果可能的话，我热衷于避免 JavaScript、UA 嗅探以及使用已弃用的媒体类型（例如手持设备）。
html - 当设备宽度小于 400 像素时，HTML/CSS 无法响应
如果有人可以快速查看此代码并提供建议，那将不胜感激。
我有一些图像可以在 iPad 和 PC 屏幕上正确调整大小。但是，一旦您在手机上尝试/缩小浏览器窗口大小，图像就无法正确调整大小。
CSS：
HTML：
图像宽 170 像素，一行中有 6 个，当您将鼠标悬停在它们上方时，它们都以灰色突出显示（通过 CSS）。
当我将浏览器调整为手机大小时，它们会变得比以前更大！
非常感谢任何建议。
如果有人对此主题很了解并且可以提供帮助，请与我联系，我会尽力提供您需要的任何信息。
谢谢。
css - CSS3 媒体查询 - Chrome 控制台
我正在尝试将媒体查询用于各种不同的视口。然而，它似乎并没有在我的 google chrome 控制台中找到它。
我有以下代码：
我还在我的 index.html 中包含了样式表以及以下元标记...
我似乎无法弄清楚为什么这不起作用任何帮助都会很棒。
提前致谢。
google-chrome - 视口设备宽度：Safari 横向宽度不正确/字体大（Chrome 上正确）
添加<meta name = "viewport" content = "width = device-width"到我的响应式 HTML5 页面后，默认1em字体会在所有移动设备（包括 iOS Safari）上以适当且可用的大小显示；但是，将屏幕从垂直纵向旋转到横向横向位置会导致字体大小发生变化（页面上的所有内容都变得太大，即使界面元素保持不变），并且这种变化仅发生在 iOS 上的 Safari 中，并且不在 Android 上的 Chrome 中。
为什么在 Safari 中旋转时字体大小会发生变化？我认为上面的元数据足以表明我的网站已经过优化，可以响应所有屏幕尺寸，不是吗？
是否必须为 iOS Safari 指定一个额外的怪癖？为什么假设我的网站在缩放到时无法查看，device-width即使这正是指定的内容？！
html - 为什么我的视口标签不能在大多数移动设备上正确使用设备宽度？
我正在使用以下元标记。
当我从手机打开网站时，它根本没有响应。我没有改变我的css代码。
请帮我！谢谢！
css - 以 * 为媒体查询前缀，例如 *-device-width，是对 @media 规则的有效查询吗？
我们公司的一些网站使用@media 规则，其中查询使用设备宽度，例如
当我遇到此链接时，我正在搜索我们公司网站的 CSS 以查找任何过时的规则。作者断言诸如 with 之类的星号前缀*-device-width可以用于媒体查询，并且由于它是 Google 链接，因此该断言必须是正确的：p
我无法用我当前的设置对此进行测试。我尝试在 W3Schools 及其设置上应用此规则，但它似乎不起作用（尽管有效的查询确实有效）。此处@media 的 MDN 页面没有提及此查询的有效性。WHATWG 文档（例如这个）和 W3C 文档（例如这个）也没有。
星号前缀*-device-width是否对媒体查询有效，这样该规则同时适用于max-device-widthAND min-device-width？
viewport - 是视口问题还是什么？
正文按计划采用窗口大小，但是如果我在 Mozilla 浏览器中单击鼠标滚轮，或者只是在 ipad 中向右/向下滚动，我就有了这个边距。我认为发生这种情况是因为某些内容首先出现在文档中然后隐藏，但可能不是这样......我该如何解决这个问题？提前致谢！
顺便说一句，我用<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">在<head>
