Question

我收到了最低宽度为767px的设计。设计有点“拥挤”＃34;宽文本和这些文本很好地适应了背景。

我想让您问一下，将767px设计作为最小的可用设备的最佳方法是什么。较低的宽度不应该接收垂直滚动条，但应该扩展到该设备上初始加载的最小宽度。

我试图通过调整元视口标记来解决这个问题：

<meta name="viewport" content="width=device-width, min-width=767px, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

但它似乎并不像我想的那样有效。有什么想法吗？

Answer 1

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

此代码应位于<head>文档的html部分内。现在使用此代码并将your_class_name替换为您的类名。

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    .your_class_name {
        width: 100%;
    }
}

希望这对你有用。

Answer 2

我进行了更详细的搜索，并在此处找到了我需要的内容https://www.brendanlong.com/setting-a-minimum-viewport-width-for-responsive-pages.html：

var MIN_WIDTH = 767;
var viewport = document.createElement("meta");
viewport.setAttribute("name", "viewport");
if (screen.width < MIN_WIDTH) {
    viewport.setAttribute("content", "width=" + MIN_WIDTH);
} else {
    viewport.setAttribute("content", "width=device-width, initial-scale=1");
}
document.head.appendChild(viewport);

这确实是我所需要的，如果屏幕宽度小于767px，则使用content =“width = 767”调整视口元标记屏幕宽度较低的设备现在使用767px作为屏幕宽度，并在初始加载时将页面缩小到100％并具有正确的缩放级别

如何设置设备最小宽度和缩小较低的宽度

2 个答案: