Question

我正在尝试让iOS Safari动态设置视口的宽度，以便我可以在移动设备上获得桌面视图。我们将移动断点的外部样式表分隔为Breakpoints.css。

此处的方法是禁用Breakpoints.css并将视口更改为1024px。

这似乎完全适用于Chrome的开发工具，但不适用于实际的iPhone。

注意：目标是即时更改外观到桌面视图，而无需重新加载页面。我的猜测是iOS Safari正在更改视口并禁用Breakpoints.css，但它不会重新呈现页面，因为它已经加载了。

以下是切换桌面版本的链接：

<a id="breakCSSButton" href="#">Toggle Desktop/Mobile View</a>

以下是代码：

$(function () {
    var breakpointLinkTag = $('link[href="Breakpoints.css"]');

    $('#breakCSSButton').click(function () {
    breakpointLinkTag.prop("disabled", (_, val) => !val);
    viewportBreak = document.querySelector("meta[name=viewport]");
    viewportBreak.setAttribute('content', 'user-scalable=1, width=1024px, initial-scale=1, maximum-scale=4');
        });
});

Answer 1

您可以使用

将html元标记附加到文档中

.html('<meta= " ">')

使用内容标记通常用于CSS中的前后类。

Answer 2

我解决了这个问题。关于删除外部样式表的断点的一些方法。

我还添加了$( window ).resize();以确保视口调整，而不会让页面实际重新加载。

通过javascript设置视口宽度 - iOS Safari上的桌面版

2 个答案: