如何设置设备最小宽度和缩小比例

-1

我收到了最小宽度为767px的设计。该设计有点“拥挤”的宽度文本，这些文本被调整到背景非常好。如何设置设备最小宽度和缩小比例

我希望您能问一下将此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">

但它似乎没有工作，就像我想。有任何想法吗？

来源

2017-10-16 ggzone

您可以张贴小提琴并稍微多解释一下？ – Roysh

我做了更详细的搜索，找到了我需要的东西在这里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);

这exaclty做什么，我需要的，如果屏幕宽度小于767px的视窗meta标签，调整与内容=“宽度= 767” 屏幕宽度较低的设备现在使用767px作为屏幕宽度，并将初始加载时的页面缩小至100％并且缩放级别正确

来源

2017-10-16 09:11:56 ggzone

-1

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

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

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

希望这会对你有用。

来源

2017-10-16 08:57:22 Nit

如何设置设备最小宽度和缩小比例

回答

相关问题