Question

我正在为客户做一个网站，我需要为响应版本做一些奇怪的事情：如果我以纵向打开网站，页面应该看起来很敏感（我已经做过的媒体查询）;但如果我在横向模式下查看页面，它应该看起来像桌面版本（没有“meta viewport”标签）;我尝试在我的CSS中添加一个条件（“orientation：portrait”），但横向版本看起来不太好，因为我有像素单位和百分比单位以及所有这些，我只需要网站忽略元视口。

我该怎么做？

感谢。

编辑：我刚解决问题;脚本是这样的：

<script>
        if(screen.width<=500){
            $('head').append('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">');
        } else {
            $('head').append('<meta name="viewport" content="user-scalable=yes, initial-scale=0">');
        }
        $(window).on("orientationchange",function(){
          if(window.orientation == 0) // Portrait 
          {
            $('head').append('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">');
          } else // Landscape 
          {
            $('head').append('<meta name="viewport" content="user-scalable=yes, initial-scale=0">');
          }
        });
</script>

Answer 1

是的，在横向模式下，元视图端口被禁用。但是使用Web应用程序清单以横向模式启动不会干扰元端口。

以下是步骤

将此添加到主管部分<link rel="manifest" href="/manifest.json">
示例清单文件可以是

{＆＃34; short_name＆＃34;：＆＃34; App Name＆＃34;，＆＃34; name＆＃34;：＆＃34; Full app name＆＃34;，＆＃34; icons＆＃34 ;：[{＆＃34; src＆＃34;：＆＃34; launcher-icon-4x.png＆＃34;，＆＃34;尺寸＆＃34;：＆＃34; 192x192＆＃34;，＆＃34;输入＆＃34;：＆＃34; image / png＆＃34; }，＆＃34; start_url＆＃34;：＆＃34; /index.html"，＆＃34;显示＆＃34;：＆＃34;全屏＆＃34;，＆＃34;方向＆＃34; ：＆＃34; landscape＆＃34; }

<强>参考用于Web应用程序清单的Google开发人员文档位于this link。

Meta Viewport只在肖像上？

1 个答案: