2

我正在尝试让旧版 Web 应用程序在移动设备上“正确”运行（其中“正确”主要意味着调整 CSS 以使文本可读并隐藏多余的图像和效果）。由于各种原因（许多图形文件现在无法更改），我决定手机的宽度为 480 像素，平板电脑的宽度为 630 像素，桌面浏览器的宽度为 1024 像素。

到目前为止，我已经为智能手机和平板电脑创建了两个 CSS 组：

@media only screen and (min-width:631px) and (max-width: 1000px) { ... }

和

@media only screen and (max-width:630px) { ... }

每个都有固定的页面宽度（分别为 480 和 630 像素）并且页面的某些部分已修改（例如，手机版本有一个下拉菜单而不是悬停菜单）。

在桌面浏览器（例如 Chrome）上，这可以正常工作 - 当我更改窗口宽度时，页面布局也会相应更改。然而，在 iPhone 和 iPad 上，这并不完全有效：

  • 非视网膜 iPad（768 像素宽）在（630 像素宽）页面左右显示白色边框，但 CSS 选择正确；
  • 视网膜 iPhone 显示平板电脑版本（因为它有 640 像素宽度），但我希望它使用较低分辨率的版本。其他高分辨率（比如 >140dpi）显示器也是如此。

其他平板电脑和手机（虽然是模拟器）也大多选择正确的 CSS 媒体查询组，但不会将页面缩放到全宽。

无论设备宽度如何，如何让页面宽度始终占据可用宽度的 100%；即缩放页面到全宽？我尝试使用“viewport”参数，但这是一个固定参数，无法根据用户代理或实际设备宽度进行修改（尝试这样做的 JS hack 到目前为止还没有工作）。

欢迎任何想法！

4

0 回答 0