根据视口大小更改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" />