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

Question

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

PhoneGap在应用程序上运行良好，但是有一种“控制面板”，其宽度不会改变，并且它使得这个控制面板占据了移动视图的大部分宽度，这是不好的。

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

因此，作为一般性问题，我将如何做到这一点？ 我认为我需要在实际加载页面之前进行这些调整，但我不确定JS文件中会发生什么。 客户端正在使用JQuery Mobile和其他一些库。 原始开发者已经在使用了

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

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

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

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;
  }
}

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

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" />

Answer 3

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

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