Html 在不使用百分比的情况下扩大网站规模

目前，我正在创建一个响应网站。我目前的问题是，响应式布局的设计（不是我设计的，我只是实现该设计的人）的固定宽度为745px。当然，这并不是大多数平板电脑（如果有的话）的宽度

例如，在宽度为768px的iPad上，每侧的边距为10px。这看起来不太好，也不是设计师设计的

有没有一种方法可以让网站在移动/平板设备上升级，而不必使用百分比值？设计的几个部分依赖于固定的像素值，而将整个设计转换为百分比值或多或少是不可能的

举个例子，如果我在iPad上稍微放大一点，它看起来和预期的一模一样。因此，如果我可以选择强制平板电脑设备缩放到745px的宽度，然后保持不变，这正是我所需要的。然而，在谷歌搜索了一下之后，我还没有找到任何东西

最好是只使用CSS/HTML的解决方案，但也可以使用JavaScript

---

再澄清一点：此解决方案的目标仅为纵向模式下的平板电脑。智能手机和平板电脑应保持原样。

您可能希望调查媒体查询并稍微更改平板电脑的CSS:

您可能希望调查媒体查询并稍微更改平板电脑的CSS:

您可以包括放大相应的媒体查询：

您可以使用

transform:scale（）（带有相应的浏览器前缀）和IE的缩放：

，结果如下：

这在浏览器中应该有一个相当好的支持，并且不会因为禁止用户按自己的意愿缩放而影响用户体验（就像javascript解决方案所做的那样）

---

显然，这可能需要一些javascript调整，以适应目标设备视口的精确测量。

您可以包括放大相应的媒体查询：

您可以使用

transform:scale（）（带有相应的浏览器前缀）和IE的缩放：

，结果如下：

这在浏览器中应该有一个相当好的支持，并且不会因为禁止用户按自己的意愿缩放而影响用户体验（就像javascript解决方案所做的那样）

---

显然，这可能需要一些javascript调整以适应目标设备视口的精确测量。

-1因为没有正确阅读我的问题。正如我已经说过的那样，设计已经相当成熟了。我不能简单地更改这些值，而且所有内容都已经可以使用媒体查询了。平板电脑的设计宽度为745px。桌面版更宽。你要求的是一个只使用CSS的解决方案，却声称你不能修改CSS？您需要使用媒体查询。如果你不能改变设计，那么你真的无能为力。我可以改变css。我无法将基于745px宽度像素值的设计完全更改为流体设计。我不是设计它的人，我只是实施设计的人，坦率地说，设计并没有考虑到流体的价值，这可能不是平板电脑的最佳选择，但这不是我的创造。在这么快下结论之前，请仔细阅读我的问题。我确实正确地阅读了你的问题。由您或您的设计师来修改平板电脑的设计。如果他们设定它的宽度是745px，那么平板电脑上的宽度就是这个，它应该是带边框的。要么自己改变设计，把它推回给设计师，要么忍受它，这是你作为前端开发人员的工作。你两次暗示Adhockek没有读你的问题……我会觉得这相当侮辱。事实上，您没有提到媒体查询，也没有提供代码示例，也没有对您尝试的内容做进一步说明，因此人们只能对您提出的问题做出假设。-1感谢您没有正确阅读我的问题。正如我已经说过的那样，设计已经相当成熟了。我不能简单地更改这些值，而且所有内容都已经可以使用媒体查询了。平板电脑的设计宽度为745px。桌面版更宽。你要求的是一个只使用CSS的解决方案，却声称你不能修改CSS？您需要使用媒体查询。如果你不能改变设计，那么你真的无能为力。我可以改变css。我无法将基于745px宽度像素值的设计完全更改为流体设计。我不是设计它的人，我只是实施设计的人，坦率地说，设计并没有考虑到流体的价值，这可能不是平板电脑的最佳选择，但这不是我的创造。在这么快下结论之前，请仔细阅读我的问题。我确实正确地阅读了你的问题。由您或您的设计师来修改平板电脑的设计。如果他们设定它的宽度是745px，那么平板电脑上的宽度就是这个，它应该是带边框的。要么自己改变设计，把它推回给设计师，要么忍受它，这是你作为前端开发人员的工作。你两次暗示Adhockek没有读你的问题……我会觉得这相当侮辱。事实上，您没有提到媒体查询，也没有提供代码示例，也没有对您尝试的内容做进一步说明，因此人们只能对您问得很糟糕的问题做出假设。比如？非常特定于设备though@NathanKot可能地正如我在编辑中澄清的那样，有没有一种方法可以以这种方式只针对肖像平板电脑？简单地设置

会破坏手机和平板电脑的景观。另外，请注意，虽然我的测试手机似乎对

content=“width=745”

有响应，但手机上的设计会被弄乱，我的平板电脑根本没有响应。类似于？非常特定于设备though@NathanKot可能地正如我澄清的那样

@your according media-query{
      -webkit-transform: scale(1.1);  /* Safari 3.1+, Chrome */ 
         -moz-transform: scale(1.1);  /* Firefox 3.5+ */
          -ms-transform: scale(1.1);  /* IE9+ */
           -o-transform: scale(1.1);  /* Opera 10.50+ */
              transform: scale(1.1);
                   zoom: 1.1;         /* old IEs*/
}