在移动Web应用程序上设置多个设备的屏幕大小

Question

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

到目前为止，我已经为智能手机和平板电脑创建了两个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像素宽）在（630px宽）页面左右显示白色边框，但CSS正确选择;
• 视网膜iPhone显示平板电脑版本（因为它有640px宽度），但我希望它使用低分辨率版本。对于其他高分辨率（例如> 140dpi）显示也是如此。

其他平板电脑和手机（仿真器）也主要选择正确的CSS媒体查询组，但不要将页面缩放到全宽。

无论设备宽度如何，如何使页面宽度始终占据可用宽度的100％;即将页面缩放到全宽？我尝试使用“viewport”参数进行播放，但这是一个固定参数，根据用户代理或实际设备宽度无法修改（尝试执行此操作的JS黑客到目前为止无效）。

欢迎任何想法！