Portrait only meta view?
I am making a website for a client and I need to do something weird for the responsive version: if I open the site in portrait, the page should look responsive (with my media queries I already did); but if I view the page in landscape mode, it should look like the desktop version (without the meta viewport tag); I tried to add a condition to my css ("orientation: portrait"), but the landscape version doesn't look very good because I have pixel units and percentage units and all this, I just need the site to ignore the meta viewport.
How can i do this?
Thank.
Edit: I'll just solve the problem; script:
<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>
source to share
Yes, the metadata view port is disabled in landscape mode. But using the web app manifest to run in landscape mode doesn't interfere with the meta port.
Following are the steps
- Add this to the head section
<link rel="manifest" href="/manifest.json">
-
An example manifest file could be
{"short_name": "Application name", "name": "Full application name", "Icons": [{"src": "launcher-icon-4x.png", "sizes": "192x192", "type ":" image / png "}]," start_url ":" /index.html "," display ":" fullscreen "," orientation ":" landscape "}
The link Google Developers Doc for Web Applications Manifest is at this link .
source to share