移动版不会出现在iPhone上

Question

我正在开发一个包含完整版和移动版的网站。

我正在使用此代码设置视口元标记：

<meta id="viewport" name="viewport" content="width=1100, maximum-scale=1.0" />
<script>
        deviceWidth = window.innerWidth;
        var viewport = document.getElementById('viewport');
        if(deviceWidth <= 480) viewport.setAttribute('content', 'width=device-width, initial-scale=1.0,maximum-scale=1.0');
</script>

因此默认元设置为content-width = 1100，如果此设备宽度小于480像素，则设置为'width=device-width。

它适用于所有Android手机，但不适用于iPhone。

问题是什么，我该如何解决？

Answer 1

要使灵活的布局宽度与设备宽度相匹配，您可以使用以下选项：

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

适用于Android，Iphone和浏览器。无需更改元标记中的内容以检测设备/浏览器宽度。

详细了解元标记here。