0

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

例如，在宽度为 768px 的 iPad 上，每边会有 10px 的边距。这看起来不是那么好，也不是设计师的意图。

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

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

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

再澄清一点：此解决方案的目标只是纵向模式下的平板电脑。景观中的智能手机和平板电脑应保持不变。

4

2 回答 2

2

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

您可以使用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 调整以适应目标设备视口的精确测量。

于 2012-11-19T13:28:59.683 回答
1

您可能想调查媒体查询并稍微更改平板电脑的 CSS：http: //www.w3.org/TR/css3-mediaqueries/

于 2012-11-19T09:29:43.610 回答