调整网页大小以适合iPhone屏幕

Question

通过阅读本教程，我创建了一个CSS族谱。 在桌面浏览器中，它看起来很完美。 这是它的外观。

现在，我试图使其在iPhone和iPad屏幕上显示相同。 但是，在这些屏幕上查看时，会弄乱布局。 像这样

请注意，缺少一些连接节点的线。

我试图使用html meta标签来调整页面大小。 尝试了下面的所有3行。

<meta name="viewport" content="width=device-width">

<meta name="viewport" content="initial-scale=1.0">

<meta name="viewport" content="initial-scale=2.3, user-scalable=no">

但无济于事。 我只需要缩小页面以适合iPhone和iPad屏幕即可。 谁能告诉我如何做到这一点？

我还在这里创建了一个小提琴来演示该问题。

谢谢。

Answer 1

您在错误的类别中问过:)这比其他问题更重要。

我敢打赌，您现在找到了答案。 但是，为了您的小提琴：

    .tree {
            width:1100px;
    }

请让我知道是否还需要更多。 祝你今天愉快。