在媒体查询中更改视口

Posted 2023-03-06

【中文标题】在媒体查询中更改视口

【英文标题】：change viewport in media query

【发布时间】：2013-03-08 13:41:12

【问题描述】：

我目前正在从事响应式网页设计。 “智能手机视图”还没有准备好，因为我的客户必须获得更多预算。

因此，我需要实现一个临时视图，我想用一个仅在智能手机上激活的固定视口来实现它。

我使用这种方式设置视口：

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

如果触发以下媒体查询，我想将设备宽度更改为 700 像素：

@media only screen and (max-width:700px)

以下代码不起作用：

@media only screen and (max-width:700px)
    .pagewrapper
        width:700px;
    

    @-ms-viewport
        width:700px;
    

    @-o-viewport 
        width: 700px;
    

    @viewport 
        width: 700px;
    

您知道完成此任务的其他解决方案吗？也许使用 javascript / jQuery？

【问题讨论】：

我能想到的唯一方法是一个 jquery if 语句，它根据媒体大小添加一个元标记。

尝试最小宽度。

@im_benton 这句话看起来怎么样？

我添加了我说的jquery

【参考方案1】：

@media only screen and (min-width:700px)

您只能使用这种类型的媒体查询来更改您的 CSS。如果这被击中 min-width:700px 写你的 css w.r.t 这个。并更改您的容器宽度，例如 <div class="pagewrapper"></div>

下面的meta标签就完美了：

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

【参考方案2】：

如果您只针对设备，我认为您可以尝试使用 max-device-width 而不是 max-width 或 min-width。

【参考方案3】：

if ($('body').width() < 700)   
      $('head').append('<meta name="viewport" content="width=700, initial-scale=1.0">');

else
      $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0">');

【讨论】：

这会导致您的 html 中出现越来越多的视口标签。 no-js 也没有视口。

【参考方案4】：

这是我的解决方案，效果很好。这样，脚本只运行一次并在文档准备好之前执行。也支持 no-js。感谢您的帮助。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
    if($(window).width() < 765)
    
        x=1;
        if(x==1)
        
            $('meta[name=viewport]').remove();
            $('head').append('<meta name="viewport" content="width=765px, initial-scale=1.0">');
            x=0;
        ;
    ;
</script>

【参考方案5】：

接受的答案是正确的，但如果您使用的是 jQuery，并且 jQuery 需要准备好。在慢速连接时，您会遇到该代码的问题，因此您可能会收到 '$' undefined 错误。

这就是我在这种情况下更喜欢纯 JavaScript 的原因：

<meta name="viewport" id="viewport" content="width=device-width; initial-scale=1">
<script type="text/javascript">
    (function setViewPort() 

        if (screen.width < 640 && (window.orientation == 0 || window.orientation == 180)) 
         document.getElementById("viewport").setAttribute("content", "width=480, initial-scale=0.68");
         //alert('480 @ 0.68, landscape');
         else if (screen.width < 640) 
         // document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1");
         // disabled, since its the same as the default. if this one is different, uncomment line above
         //alert('device-width @ 1, landscape');
         else if (screen.width >= 640) 
         document.getElementById("viewport").setAttribute("content", "width=640; initial-scale=0.5");
         //alert('640, high res phones');
        
    )();
</script>

在我的情况下，我将纵向设置为 480px，缩放为 0.68，横向设置为 320px，缩放为 1，因此 ppl 可以看到更大的文本，并且（因为这是一个仅限移动设备的页面）如果 screen.width 高于 640（就像我的android 5" 手机，屏幕尺寸为 1900x1080）到 640px，缩放 0.5（因为宽度始终保持在 320px）。

问候，马克斯

【讨论】：

你会如何用em而不是px来做到这一点？

计算必须以像素为单位，但您可以设置 em。根据您的基本尺寸（我假设它是 16px，所有浏览器的默认值），您可以划分 screen.width / 基本尺寸并将 +'em' 附加到宽度值。

这对我很有用！谢谢。为此，我更喜欢纯 JS 而不是 jQuery。