如何扩展网站以适应iPhone / iPad / Android手机/ Android平板电脑屏幕？

Question

我正在使用此视口标记：

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

然而，iPhone / iPad / Android设备的页面比屏幕大得多。我只能看到网站的左上角。我的网站宽900px。

接下来，我将视口更改为：

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

现在在iPhone和iPad上，它的内容已经缩小，以便填满屏幕。我不确定iPad，因为我没有其中一个可以测试。在Android设备上，此更改没有做任何事情。

设置视口的正确方法是什么，以便网站填充浏览器宽度？

Answer 1

尝试将target-densitydpi=device-dpi添加到第二个示例中。这是特定于Android的，可与width=device-width一起使用，告诉设备您希望缩放页面以适应所有设备分辨率。