6

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

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

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

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

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

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

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

4

3 回答 3

9

您可能想查看“响应式”设计。具体来说，我真的很喜欢 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，因此在 240 像素处，您可能有一个字体大小为 16 像素的标题类：

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

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

于 2013-07-29T21:46:25.480 回答
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" />
于 2013-07-29T21:45:28.047 回答
1

在这种情况下，我建议使用Media Queries。

@media (min-width: X) and (max-width: Y) {
    /* CSS rules for screens of width between X and Y. */
}
于 2013-07-29T21:52:19.233 回答