logo标签列表

使用视口元标记设置内容的最小宽度

htmlresponsive-designmeta-tags
5
我需要将内容的最小宽度设置为480像素，这样任何在分辨率小于或等于此值的屏幕上查看的用户都必须横向滚动才能查看内容。原因是在低于此分辨率时无法使布局正常工作。
以下是现有内容：
<meta name="viewport" content="width=device-width,  initial-scale=1, maximum-scale=1, minimum-scale=1">

我需要类似于这样的东西，但是显然这不起作用。
<meta name="viewport" content="width=device-width,, min-width=480px,  initial-scale=1, maximum-scale=1, minimum-scale=1">
你是想设置页面上内容的最小宽度吗？为什么不使用媒体查询呢？ - Rchristiani
只需要在<body>元素上设置一个 min-width 属性就可以了。 - Web_Designer
相关内容：https://dev59.com/bGUp5IYBdhLWcg3wzp1k - Brendan Long
5个回答
3
这是一个针对平板电脑和台式机的响应式网页解决方案。在此代码中，我们动态禁用了移动版。在移动设备上：
<!-- Meta Responsive -->
<meta id="myViewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script>
window.onload = function () {
    if(screen.width <= 767) {
        var mvp = document.getElementById('myViewport');
        mvp.setAttribute('content','width=767');
    }
}
</script>
<!-- End of Meta Responsive -->
2

看起来你是想设置页面内容的最小宽度，而不是视口本身的最小宽度。可能这篇文章能帮助你。

你可能想要做的是：

@media all and (max-width: 480px) {
    // styles assigned when width is smaller than 480px;

}

像这样，在该块中，您可以为宽度为480px及以下的屏幕上的内容设置样式。

希望这就是您要找的内容。

0

我尝试了很多代码，并通过重新加载视口实现了一些不错的结果... 但是，我认为最好的方法是创建一个完全响应式的网站（最大宽度为320像素;)

这是最好的方法：

<script>
//VIEWPORT

function mobileFriendly() {
    setTimeout(function () {
        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
            var ww = ( document.documentElement.clientWidth < window.screen.width ) ? jQuery(window).width() : window.screen.width; //get proper width
            var mw = 725; 
            //alert ("width" + ww);
            var ratio = ww / mw; //calculate ratio
            //alert ("ratio: " + ratio);
                if( ratio < 1 ){ //smaller than minimum size
                    jQuery("meta[name='viewport']").attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + mw);
                }else{ //regular size
                    jQuery("meta[name='viewport']").attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
                }
            }
        }, 600);
    }
    jQuery( document ).ready( function(){
    mobileFriendly()
    });
    window.addEventListener("orientationchange", mobileFriendly, false);

</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta content="user-scalable=yes, maximum-scale=1.6, width=device-width, initial-scale=1, target-densitydpi=device-dpi" name="viewport">

-2
你的第二个解决方案实际上是可行的——也许你没有注意到的是，在width=device-width之后有2个逗号，这可能就是为什么它无法正常工作的原因。我复制了它，并没有出现任何问题。
有时候新鲜的眼睛就能解决一切。
编辑： 然而，在你的情况下，媒体查询确实是你所需要的。
-4
<script>
        //viewport just for screens under/with 480px width other screen widths show the whole page resized
        if(screen.width <= 480) {
            document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;");} 
        //for devices with more and less/equal than 480px width 
        window.onresize = changeViewport;
            function changeViewport(){
                if(screen.width <= 480) {
                    document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;");} 
                if(screen.width > 480) {
                    document.getElementById("viewport").setAttribute("content", "");}           
                }
    </script>
在这种情况下，JavaScript 太过于复杂了。 - caiosm1005
根据我的经验，这种JavaScript对元数据的操作很好用。 - Morio
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接