javascript - 根据视口(viewport)大小更改 HTML 元素的宽度

Question

我的任务是让 Web 应用程序更加适合移动设备。我正在通过 PhoneGap 运行该应用程序以获取移动版本，但事先使用 Ripple 模拟器测试其外观。

PhoneGap 在应用程序上工作得很好，但是有一种宽度不变的“控制面板”，它使得这个控制面板占据了移动 View 的大部分宽度，这不是好的。

所以基本上，我需要编辑当前的 JavaScript 文件，以便它检测查看器是否是移动设备，并相应地调整此控制面板元素的宽度。不幸的是，我基本上是所有网络开发的新手..

所以作为一个一般性问题，我将如何着手做这件事？我想我需要在实际加载页面之前进行这些调整，但我不确定这会在 JS 文件中的什么位置发生。客户端正在使用 JQuery Mobile 和一些其他库。原开发者已经在使用

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

标签，但它对这个控制面板部分没有影响，控制面板元素的宽度是硬编码的。

这是一个非常模糊的问题，但我将不胜感激任何提示或指导。

Answer 1

您可能想查看“响应式”设计。具体来说，我真的很喜欢 Bootstrap 的实现。它全部由 CSS 控制，并基于视口(viewport)像素宽度。

您可以使用以下“@media”CSS 代码创建响应式 CSS:

@media (max-width: 240px) {
   /* really tiny screens */
}
@media (min-width: 241px) and (max-width: 319px) {
   /* a little bit bigger screens */
}
@media (min-width: 320px) and (max-width: 767px) {
   /* Basically up to, but not including an iPad */
}
@media (min-width: 768px) {
   /* iPad and bigger */
}

在每个@media 标签内，您可以为每个大小放置自定义 CSS，因此在 240px 处，您可能有一个字体大小为 16px 的标题类:

@media (max-width: 240px) {
   /* really tiny screens */
  .title {
    font-size: 16px;
  }
}

然后冲洗并重复更改每个后续视口(viewport)大小的字体大小。