元视口只是在肖像？ [英] Meta Viewport just on Portrait?

问题描述

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

我该怎么做？

谢谢。

编辑：我只是解决了这个问题;脚本是这样的：

 < script> 
 if（screen.width <= 500）{
 $（'head'）。append（'< meta name =viewportcontent =width = device-width，user-scalable = no ，initial-scale = 1>'）; 
} else {
 $（'head'）。append（'< meta name =viewportcontent =user-scalable = yes，initial-scale = 0>'）; 
 
 $（window）.on（orientationchange，function（）{
 if（window.orientation == 0）//肖像
 {
 $ （'head'）。append（'< meta name =viewportcontent =width = device-width，user-scalable = no，initial-scale = 1>'）; 
} else / / Landscape 
 {
 $（'head'）。append（'< meta name =viewportcontent =user-scalable = yes，initial-scale = 0>'）; 
} 
}）; 
< / script> 
  

解决方案

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

以下是步骤

：

1. 将此项添加到< link rel =manifesthref =/ manifest.json>


$ b

{short_name：应用程序名称，名称：完整的应用程序名称，图标：[{src：launcher-icon-4x.png，sizes：192x192，type：image / png}]，start_url：/index.html， display：fullscreen，orientation：landscape} >
Google开发者的网络应用清单文档位于此链接。


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.

How can I do that?

Thanks.

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

解决方案

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.

Here are the steps

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

2. An example manifest file could be

   { "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" }

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

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