Question

我刚从头开始构建我的Shopify主题。这是我的第一个响应式设计，我对一个主要问题的期望非常满意。

在我们的产品页面上，我们使用galleria.io的全屏图片库作为背景，以显示我们的产品图片。在桌面上，这是一个非常好的体验。

在移动设备上查看：http://finegra.in/products/bowden

但是，在移动设备上，背景图像使页面具有固定约束，这意味着任何未在视口上显示的内容都无法向下滚动视图。

基本上，我试图弄清楚如何在保持全屏背景图像的同时突破固定约束。

实际上，我可以将移动设备上的内容全屏启动，而不是作为背景。

对此的任何帮助将不胜感激。

以下是全屏背景库的HTML：

<div id="galleria">
    <div class="galleria-container notouch fullscreen" style="width: 100%; height: 100%;">
        <div class="galleria-stage">
            <div class="galleria-images" style="position: relative; top: 0px; left: 0px; width: 100%; height: 100%;">
                <div class="galleria-image" style="overflow: hidden; position: absolute; top: 0px; left: 0px; transition: none 0s ease 0s ; opacity: 0; z-index: 0;">
                    <div class="galleria-layer" style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2;"></div>
                </div>
                <div class="galleria-image" style="overflow: hidden; position: absolute; top: 0px; left: 0px; opacity: 1; width: 1663px; height: 960px; transition: none 0s ease 0s ; z-index: 1;">
                    <div class="galleria-layer" style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2; display: none;"></div>
                    <img width="1663" height="1108" style="display: block; opacity: 1; min-width: 0px; min-height: 0px; max-width: none; max-height: none; width: 1663px; height: 1108px; position: absolute; top: -74px; left: 0px;" src="http://cdn.shopify.com/s/files/1/0207/2640/products/MG_9400_1024x1024.jpeg?156">
                </div>
            </div>
            <div class="galleria-loader" style="opacity: 1; display: none;"></div>
            <div class="galleria-counter" style="opacity: 1;">
                <span class="galleria-current">1</span>
                /
                <span class="galleria-total">10</span>
            </div>
            <div class="galleria-image-nav">
                <div class="galleria-image-nav-right" style="opacity: 0.5; display: block;"></div>
                <div class="galleria-image-nav-left" style="opacity: 0.5; display: block;"></div>
            </div>
        </div>
        <div class="galleria-thumbnails-container" style="top: 884px; opacity: 1;">
            <div class="galleria-thumb-nav-left disabled"></div>
            <div class="galleria-thumbnails-list" style="overflow: hidden; position: relative;">
                <div class="galleria-thumbnails" style="overflow: hidden; position: relative; width: 180px; height: 10px; left: 0px;">
                    <div class="galleria-image active">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                </div>
            </div>
            <div class="galleria-thumb-nav-right disabled"></div>
            <div class="galleria-thumbnails-tab" style="visibility: hidden;"></div>
        </div>
        <div class="galleria-info" style="position: absolute; left: -10000px; display: block; opacity: 1;">
            <div class="galleria-info-text" style="width: 1623px;">
                <div class="galleria-info-title" style="display: none;"></div>
                <div class="galleria-info-description">BOWDEN</div>
            </div>
        </div>
        <div class="galleria-tooltip" style="opacity: 0;"></div>
    </div>
</div>
</div>

以下是CSS：

#galleria {
    background: none repeat scroll 0 0 #FFFFFF;
    position: relative;
    z-index: 1;
}

.galleria-container {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
}
.galleria-container {
    background: none repeat scroll 0 0 #FFFFFF;
}
.galleria-container, .galleria-stage, .galleria-images, .galleria-image img, .galleria-image-nav, .galleria-image-nav-left, .galleria-image-nav-right, .galleria-thumbnails-container, .galleria-info, .galleria-tooltip {
    margin: 0;
    padding: 0;
}

.galleria-stage {
    height: 100%;
    position: absolute;
    width: 100%;
}

.galleria-thumbnails-container {
    bottom: 0;
    padding-top: 16px;
    position: absolute;
    width: 100%;
    z-index: 2;
}

Answer 1

选项1

如果要在移动设备上将图库显示为内容块（不在后台），则可以根据屏幕宽度加载额外的CSS和媒体查询。您必须覆盖此额外文件中的某些position: absolute以使您的块恢复流量。

像：

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="/mobile.css" />

或在现有的css文件中覆盖它：

@media all and (max-width: 1024px) {
    .galleria-container {
        position: relative;
    }

    /* and a lot more CSS ;-) */
}

选项2

要使用现有布局的滚动条，无论如何必须替换一些position: absolute和float: left|right，以使您的内容重新流入并扩展父div元素的高度：

html {
        overflow: auto !important;
}

body {
        overflow: visible !important;
}

#info {
    position: relative;
    float: none;
}

#product-details {
    position: relative;     
}

我测试了这个设置。现在可以在iPad / iPhone和IE9 +上看到滚动条。但是你必须调整边距和偏移量，因为我必须更改position值

请参阅http://stephan.mestrona.net/finegra.in/products/bowden.html

使用全屏背景图像时解决移动设备上的固定约束问题

1 个答案:

选项1

选项2