Meta视口仅在竖屏模式下启用？

Question

我正在为客户制作一个网站，针对响应式版本我需要做一些奇怪的事情：如果我以纵向打开网站，则页面应该是响应式的（我已经使用媒体查询完成）；但是如果我以横向模式查看页面，则应该呈现桌面版（无“meta viewport”标记）；我尝试在我的CSS中添加条件语句（“orientation:portrait”），但是横向版本看起来不好，因为我有像素单位和百分比单位等，我只需要让网站忽略meta viewport即可。如何实现？谢谢。编辑：我已经解决了问题；脚本如下：

<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>

- juanlunaco

---

CSS方向可能是你正在寻找的：http://www.hongkiat.com/blog/css-orientation-styles/ - Mathijs Rutgers

Answer 1

是的，在横屏模式下，元视口被禁用。但是使用 Web 应用程序清单以横屏模式启动不会影响元视口。

以下是步骤

1. 将此添加到 head 部分：<link rel="manifest" href="/manifest.json">

2. 示例清单文件可能如下：

   { "short_name": "应用名称", "name": "完整应用名称", "icons": [ { "src": "launcher-icon-4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "/index.html", "display": "fullscreen", "orientation": "landscape" }

参考资料 Google 开发者文档中关于 Web 应用程序清单的说明请参见 this link。

- Agnel Vishal