Question

我注意到在低分辨率屏幕上查看页面的背景图像时（或调整浏览器窗口以模拟小屏幕），jQuery Mobile会产生奇怪的效果。导航到带有背景图像的页面时，图像会在屏幕底部附近显示一秒钟，然后“跳”到屏幕中心（应出现在屏幕中央）屏幕从一开始就是。）

我设置了一个小提琴来演示我所说的内容。要获得完整效果，请首先调整小提琴“结果”窗口（屏幕右下角）的大小，使其大小与红色背景的div大小相同。然后单击“图像页面”按钮。

http://jsfiddle.net/FgVz8/3/

是什么导致背景图像出现这种“生涩”的行为？更重要的是，任何想法我如何解决它？

如果它只是一个单一的图像，那将不是什么大问题，但我正在构建一个带有后退/前进按钮的图像库，以及导航的每个单独的图像（每个图像都在一个单独的jQM“页面”上）展示这种奇怪的效果，因此它会带来相当“不平稳”的用户体验......特别是在一个接一个地观看多个图像时。

非常感谢任何帮助！

编辑：看起来Stack Overflow不会让我链接到JSFiddle，除非我也在这里发布我的代码，所以这是我的代码......

HTML正文......

<div id="home_page" data-role="page">
    <div id="content" data-role="content">
        <a href="#image_page" data-role="button">Image page</a>
    </div>
</div>

<div id="image_page" data-role="page">
    <p>Test 123...</p>
</div>

... CSS

#content {

    background: red;
    width: 200px;
    height: 250px;    

}

#image_page { 

    background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/2000px-Logo_Google_2013_Official.svg.png);
    background-size: contain;  
    background-repeat: no-repeat;
    background-position: center;
}

jQuery Mobile中奇怪的背景图像“效果”

0 个答案: