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

Question

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

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

所以无论如何，在我的 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%;(如果您使用边距或填充，则在执行操作时应将它们牢记在心)宽度计算)