Question

我在ipad上优化使用页面时遇到了一些问题。

不幸的是（我猜）我没有对我的元素使用em-measurements，所以缩小任何东西都不是一种选择。该页面非常复杂，所有这些都不是一个选项。

现在使用......

<meta name="viewport" content="width=device-width,initial-scale=0.8,minimum-scale=0.8,maximum-scale=1.5" />

我可以在横向模式下正确显示页面。但是，切换到纵向会导致整个页面超出视口大小，并且无法扩展到可以看到所有内容的位置。

即使我将“最小比例”设置为0.1，也没有得到正确的结果。

我正在使用居中的布局（使用margin：0 auto;）而且奇怪的是，在纵向模式下，我的内容区域似乎粘在页面的左侧，在右侧留下了巨大的空隙。如前所述，我不能以允许我看到整个内容区域的方式缩放页面，这个内容区域宽度为1026像素，但最终会变宽，因为我必须在其上放置图像，延伸到大约。每边30px。

这是我的内容区域的CSS：

    position:               relative;
    width:                  1026px;
    height:                 auto;
    top:                    40px;
    margin:                 0px auto;
    border:                 1px solid #e0e0e2;
    box-shadow:             inset 1px 2px 1px 0px #c6c6c6;
    -webkit-box-shadow:     inset 1px 2px 1px 0px #c6c6c6;
    -moz-box-shadow:        inset 1px 2px 1px 0px #c6c6c6;
    -o-box-shadow:          inset 1px 2px 1px 0px #c6c6c6;
    border-radius:          24px 24px 24px 0;
    -moz-border-radius:     24px 24px 24px 0;
    -webkit-border-radius:  24px 24px 24px 0;
    -o-border-radius:       24px 24px 24px 0;
    border-radius:          24px 24px 24px 0;
    background-color:       #ffffff;

我很感激任何有用的输入！谢谢！

Answer 1

尝试将视口设置为1.0

以下是关于如何使用视口的一些很好的解释...

iPad细节： http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/

通用” https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

Answer 2

我能够通过使用以下代码找到解决扩展问题的有效解决方案：

        var detectOrientation=function(_init) {
            var orientation=window.orientation;
            if ((orientation==0||orientation==180)) { /*p*/
                $('viewportDefinition').setAttribute('content','width=1024px,initial-scale=0.7,minimum-scale=0.7,maximum-scale=2.5');
            } else if ((orientation==90||orientation==-90)) { /*l*/
                $('viewportDefinition').setAttribute('content','width=device-width,initial-scale=0.9,minimum-scale=0.9,maximum-scale=2.5');
            }
        };
        window.onorientationchange=detectOrientation;

然而，我仍然得到一个错位的内容区域 - 它没有居中。使用保证金：0自动;它的固定宽度，这怎么可能？

主要内容块位置在iPad上搞砸了

2 个答案: