Meta Viewport just on 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.

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>

回答1:

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

Add this to head section <link rel="manifest" href="/manifest.json">
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.

来源：https://stackoverflow.com/questions/31165916/meta-viewport-just-on-portrait

标签

html

css

responsive-design