Question

我会直接跳到这里。在我的Nexus 4上，我的网页显示完美。看起来不错，应该如此。

我的网页基本上是一个谜题，所有八个部分都是使用绝对定位网格化的不同图像。

所以无论如何，在我的Nexus 4上，它看起来非常棒。所有的部分都是网状的，这基本上就是我想要的。

当我在Note 3或Samsung S5上测试时，我遇到的问题是图像尺寸非常大而且不再啮合在一起。我不知道我在这里做错了什么，真的很奇怪。

我正在使用viewport元标记，而且我已经弄乱了缩放以及宽度和高度，但无济于事。

这是我的代码中定位图像的部分 -

 <div>
    <div class="hide" id="one" style="position:absolute;left:20px;top:20px;">
        <img src="1.png"/>
    </div>  
    <div class="hide"  id="two" style="position:absolute;left:117px;top:20px;">
        <img src="6.png"/>
    </div>  
    <div class="hide"  id="three" style="position:absolute;left:21px;top:122px;">
        <img src="4.png"/>
    </div>
    <div class="hide"  id="four" style="position:absolute;left:134px;top:128px;">
        <img src="2.png"/>
    </div>
    <div class="hide"  id="five" style="position:absolute;left:212px;top:128px;">
        <img src="7.png"/>
    </div>
    <div class="hide"  id="six" style="position:absolute;left:20px;top:256px;">
        <img src="8.png"/>
    </div>
    <div class="hide"  id="seven" style="position:absolute;left:226px;top:266px;">
        <img src="5.png"/>
    </div>
    <div class="hide"  id="eight" style="position:absolute;left:18px;top:364px;">
        <img src="3.png"/>
    </div>
  </div>

（这有点乱，但我试图让它保持井井有条）。为了澄清一些事情，这是我到目前为止所想到的。

看起来它实际上跟随其他设备的绝对位置，图像太大了。我通过观察图像的两侧发现了这一点，它真的看起来像我从左边放20px的那些实际上是从左边20px。这让我更加困惑。

任何建议都很棒。

非常感谢

Answer 1

尝试在此问题中将图片作为commented进行响应。但是，不要给它们100％的值，而是尝试更少的值。

例如，如果每行有3张图片，则图片的宽度应该类似于width: 33%;（如果使用边距或填充，则在进行宽度计算时应该记住它们）

如何让移动网页在所有设备上显示相同的内容

1 个答案: