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

Question

我会直接进入这个。在我的 Nexus 4 上，我的网页完美显示。它看起来不错，应该如此。

我的网页基本上是一个拼图，所有八块都是不同的图像，它们使用绝对定位网格在一起。

无论如何，在我的 Nexus 4 上，它看起来非常棒。所有的碎片都啮合，这基本上就是我想要的。

当我在 Note 3 或三星 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%;（如果您使用边距或内边距，则在计算宽度时应考虑到它们）