HTML5：在移动设备和桌面设备上居中绝对布局固定大小的元素
HTML5: Centered absolute layout fixed size element across mobile and desktop
我正在创建一个 HTML5 游戏，在 4:3 'viewport' 中，其中的元素是绝对定位的（因为我想使用 'world coordinates'）。
我希望能够使用单一布局来开发它，而不是为不同的设备使用不同的布局。我想要一个单一的 4:3 容器元素，以黑色背景为中心。
在大屏幕（table、桌面）上，我希望它达到最大物理尺寸（例如 20 厘米 x 15 厘米）。在移动屏幕上，我希望它可以缩放以适应任何方向而不会溢出（这将鼓励人们翻转到横向）。
这可能吗？我一直在摆弄视口标签，但一无所获。
绝对定位的项目基于页面已知（左）角的 X、Y 定位。因此，如果您处于页面大小可能发生变化的情况下，您选择按比例重新定位这些项目可能会涉及 javascript 的船载量。您必须评估页面大小，确定绝对定位元素的边距和填充比例，然后根据需要重新定位它们。
没有看到代码或屏幕截图，不可能确切知道您要做什么。要问自己的大问题是为什么？你真的需要绝对定位，还是这只是一种避免相对位置和盒子模型的复杂性的方法？我个人的经验法则是，只有当一个项目必须漂浮在另一个容器上或与另一个容器相交时，它才被绝对定位，而且大多数情况甚至还有其他选择。响应式设计已经取得了长足的进步，混合使用 javascript、css 和媒体查询很可能可以实现您的目标。
我在文章 Case Study: Auto-Resizing HTML5 Games
中找到了我要找的东西
and here's what I made, based on that:
我正在创建一个 HTML5 游戏，在 4:3 'viewport' 中，其中的元素是绝对定位的（因为我想使用 'world coordinates'）。
我希望能够使用单一布局来开发它，而不是为不同的设备使用不同的布局。我想要一个单一的 4:3 容器元素，以黑色背景为中心。
在大屏幕（table、桌面）上，我希望它达到最大物理尺寸（例如 20 厘米 x 15 厘米）。在移动屏幕上，我希望它可以缩放以适应任何方向而不会溢出（这将鼓励人们翻转到横向）。
这可能吗？我一直在摆弄视口标签，但一无所获。
绝对定位的项目基于页面已知（左）角的 X、Y 定位。因此，如果您处于页面大小可能发生变化的情况下，您选择按比例重新定位这些项目可能会涉及 javascript 的船载量。您必须评估页面大小，确定绝对定位元素的边距和填充比例，然后根据需要重新定位它们。
没有看到代码或屏幕截图，不可能确切知道您要做什么。要问自己的大问题是为什么？你真的需要绝对定位，还是这只是一种避免相对位置和盒子模型的复杂性的方法？我个人的经验法则是，只有当一个项目必须漂浮在另一个容器上或与另一个容器相交时，它才被绝对定位，而且大多数情况甚至还有其他选择。响应式设计已经取得了长足的进步，混合使用 javascript、css 和媒体查询很可能可以实现您的目标。
我在文章 Case Study: Auto-Resizing HTML5 Games
中找到了我要找的东西 and here's what I made, based on that: