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

Question

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

例如，在宽度为 768px 的 iPad 上，每边会有 10px 的边距。这看起来不太好，而且设计者也不是这样设计的。

有没有一种方法可以在不诉诸百分比值的情况下使网站在移动/平板电脑设备上更高档？设计的几个部分依赖于固定的像素值，将整个设计转换为百分比值或多或少是不可能的。

例如，如果我只是在 iPad 上稍微放大，它看起来完全符合预期。因此，如果我可以选择强制平板设备缩放到 745 像素宽度，然后保持固定，那正是我所需要的。然而，经过一番谷歌搜索后，我还没有找到任何东西。

首选 CSS/HTML 解决方案，但 JavaScript 也可以。

再澄清一点:此解决方案的目标只是纵向模式下的平板电脑。横屏中的智能手机和平板电脑应该保持原样。

Answer 1

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

您可以使用 transform:scale(); (带有相应的浏览器前缀)和 IE zoom:<x> ，结果是像这样的:

@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*/
} 

这应该在浏览器中得到相当好的支持，并且不会通过禁止用户按他们希望的方式缩放来扰乱用户体验(就像您的 javascript 解决方案那样)。

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