元视口仅在人像上? [英] Meta Viewport just on Portrait?

问题描述

我正在为客户做一个网站，我需要为响应式版本做一些奇怪的事情:如果我以纵向打开网站，页面看起来应该是响应式的(使用我已经做过的媒体查询)；但是如果我以横向模式查看页面，它应该看起来像桌面版本(没有元视口"标签)；我尝试在我的 css(orientation:portrait")中添加一个条件，但横向版本看起来不太好，因为我有像素单位和百分比单位等等，我只需要网站忽略元视口.

I'm doing a website for a client and I need to do something weird for the responsive version: if I open the website in portrait the page should look responsive (with the media queries I already did); but if I look the page in landscape mode it should look like the desktop version (without "meta viewport" tag); I tried adding a conditional in my css ("orientation:portrait") but the landscape version doesn't look good because I have pixel units and percentages units and all that, I just need that the website ignores the meta viewport.

我该怎么做?

谢谢.

我只是解决了问题；脚本是这样的:

I just solve the problem; the script is this:

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

推荐答案

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

Yes, the meta view port is disabled when in landscape mode. But using web app manifest to launch in landscape mode does not interfere with meta port.

步骤如下

1. 将此添加到头部部分

2. 示例清单文件可以是

1. Add this to head section <link rel="manifest" href="/manifest.json">

2. An example manifest file could be

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

{ "short_name": "App Name", "name": "Full app name", "icons": [ { "src": "launcher-icon-4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "/index.html", "display": "fullscreen", "orientation": "landscape" }

参考资料网络应用清单的 Google 开发者文档位于此链接.

Reference Google developers document for web app manifest is at this link.

这篇关于元视口仅在人像上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！