根据视口大小改变HTML元素的宽度

Question

我被委托使一个网络应用更加适合移动端。我正在使用PhoneGap将应用程序转换为移动版本，并使用Ripple模拟器测试其外观。

在应用中，PhoneGap工作得很好，但有一种“控制面板”宽度不会改变，导致该控制面板占据了移动视图的大部分宽度，这是不好的。

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

因此，作为一个普遍性的问题，我该如何做到这一点？我认为我需要在页面实际加载之前进行这些调整，但我不确定JS文件的哪个位置会发生这种情况。客户正在使用JQuery Mobile和其他几个库。原始开发人员已经在使用......

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

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

这是一个相当模糊的问题，但我会感激任何提示或指导。

- derekahc

---

这不会有任何影响，你需要为移动设备适配样式。您尝试过为移动站点重置CSS样式吗？使用百分比宽度而不是固定宽度或者甚至将移动用户重定向到移动站点（如果您重定向，请注意查找两个站点的规范标签和替代标签，以避免页面排名下降并通知搜索引擎蜘蛛！） - Liam Sorsby

Answer 1

你可能想要了解“响应式”设计。特别是，我非常喜欢Bootstrap的实现方式。它完全由CSS控制，并基于可视窗口像素宽度。

您可以使用以下"@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;
  }
}

然后重复冲洗操作，以更改每个后续视口大小的字体大小。

- Robbie

---

这看起来是个不错的方法，@Robbie。然而，这是一个非常大的CSS文件（他们决定把所有的CSS内容都放在一个名为all.css的文件中...），所以我需要在每个宽度“层”中复制所有不同的CSS组件吗？例如，假设这个控制面板有一个“联系人”选项卡和一个“收藏夹”选项卡，那么我是否需要在每个宽度层中都放置Contacts和Favorites的特定元素宽度？ - derekahc

Answer 2

使用方向特定的CSS，例如：

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

将视口设置为设备的最大宽度，并使用CSS处理内容的实际宽度：

<meta id="viewport" name="viewport" content="initial-scale=1.0;minimum-scale=1.0; maximum-scale=1.0" />

- eclipsis

Answer 3

在这种情况下，我建议使用媒体查询。

@media (min-width: X) and (max-width: Y) {
    /* CSS rules for screens of width between X and Y. */
}

- federico-t