主页 / 问题 / 686884
Accepted
firebear
Asked:2020-07-04 05:02:01 +0000 UTC2020-07-04 05:02:01 +0000 UTC

如何在移动设备上制作更小的布局渲染？

  • 772

你好。众所周知，尽管移动设备的屏幕分辨率很高，但移动设备的浏览器会显示其他尺寸的布局。因此，例如，具有全高清屏幕的 iPhone 7 显示 375 像素的布局。我做了一个网站，发现我网站的最小宽度是533px。进一步输入是没有意义的，因为该站点的全部含义正在崩溃。所以我只有媒体屏幕和 (min-width : 533px) 。但是如果我在浏览器中以 iphone 7 模式打开我的网站（在检查器模式下），该网站将无法正确显示，因为它的大小小于 533。

告诉我，我怎样才能使渲染（或拥有自己的）分辨率小于 533 的设备显示 533 的布局？

html

2 个回答

  1. 在您的情况下，为了让设备在尺寸不大于 533 像素的屏幕上正确显示您的布局，您需要在@media请求中写入 not min-width : 533px， but max-width : 533px。这意味着最大屏幕宽度为 533 像素或更小的设备将从您的@media请求中读取样式。

    屏幕的像素密度在这里不起作用。

    • 0
  2. Best Answer

    纯媒体查询在这里无济于事。这个任务是在拐杖的帮助下解决的：添加 viewport'y ID，然后添加这个 jquery 代码。

    if (screen.width < 533) {
$('#viewport').attr('content', 'width=533, initial-scale=' + (screen.width / 533).toFixed(4));
});
    • 0

相关问题