set different initial-scale for landscape and portrait

Question

I neet to set different initial-scale for landscape and portrait on Ipad

I added in head
<meta name="viewport" content="width=device-width, initial-scale=0.6" />

and I tried to use this script

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {   
          function onOrientationChange()
          {
            var viewportmeta = document.querySelector('meta[name="viewport"]');
            switch(window.orientation) 
            {  
              case -90:
              case 90:
                viewportmeta.content = 'initial-scale=0.6';
                break; 
              default:
                viewportmeta.content = 'initial-scale=0.8';
                break; 
            }
          }

          window.addEventListener('orientationchange', onOrientationChange);
          onOrientationChange();

but id doesn't work correct. Are there any ways to make it work ?

in a switch statement you don't need to add `break` after `default` case — maioman, Jun 25 '15 at 07:55

score 6 · Answer 1 · answered Jun 24 '15 at 15:44

The JavaScript code from the original question was quite on-spot and was almost correct. The problem when I was testing in the browser was the following: window.orientation is undefined and the switch clause is therefore redundant.

The demo for my fixed solution can be found here: JS Bin, but be sure to test it on a mobile device (read below for more details regarding this).

The essence is in the JavaScript code, which is the following:

function onOrientationChange() {

    var landscape = screen.width > screen.height;
    var viewportmeta = document.querySelector('meta[name="viewport"]');

    if(landscape) {

        viewportmeta.content = "width=device-width, initial-scale=1.0";

    } else {

        viewportmeta.content = "width=device-width, initial-scale=0.5";

    }

}

window.addEventListener('orientationchange', onOrientationChange);
onOrientationChange();

One can see that I did not use the window.orientation as it caused problems when I was testing in the browser, so I have simply checked the proportions of the width and height of the screen: var landscape = screen.width > screen.height. Also, when setting the viewportmeta.content, I have replaced the entire value and not just the initial-scale=0.6 part as in the original question.

Since I only have Android devices to test, I have also removed the IF clause regarding the iPhone and iPad detection. Therefore, the solution also works in desktop browsers. But keep in mind, that desktop browsers cannot fire the orientationchange event. I have tried the Chrome's mobile emulator and it doesn't work. My workaround was to temporarily change the event to resize.

Can you use the xcode simulator to test that? https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/GettingStartedwithiOSSimulator.html It's free as long as you have a Mac ... Then from the emulator, you should be able to trigger the orientationChange — Mikael, Jun 30 '15 at 07:01
Sorry, but I don't have a Mac nor an iPhone. I have tested it on an Android phone and it works ok. You can try and open [this plunkr](http://run.plnkr.co/qz76xyrAkyl4hFiO/) on an iPhone and test it (it's a copy of the JS Bin from the answer). On portrait, the text should be small, on landscape it should be bigger - because the `initial-scale` is different (see the JavaScript code). — alesc, Jun 30 '15 at 08:14
It seems that my previous plunkr link does not work. Try [this](http://plnkr.co/edit/lBc2DJfiMdAqnccwn2rl) instead. Launch the preview in a separate window in order to have it full screen (and without the editor). — alesc, Jun 30 '15 at 08:22

score 3 · Answer 2 · edited May 23 '17 at 11:51

Your original answer is indeed all you need (however you missed a closing } in your code snippet and I am assuming this was just a typo and not the reason why it does not work)!

Using the width as mentioned in another answer will not detect portrait and landscape because an iOS device considers it's width to be the shortest dimension and it's height to be its longest dimension no matter the orientation. Therefore your switch statement is imperative to your solution and is exactly what you need (see here).

I took your code and ran it on my iPhone in this jsFiddle (with a few adjustments such as adding the missing closing brace) and it worked fine. If you inspect the HTML panel in the fiddle after removing the Useragent detection (or instead emulating an iPhone in chrome) you will see it updates the meta content to the initial-scale=0.8 as this is the default.

https://jsfiddle.net/80xj03cx/3/

This obviously will not work in a browser because of the Useragent detection and that there is no such event as orientationChange. If you need an iOS device to run on you can always use a service like this: https://appetize.io/demo (you can even type in that fiddle URL into the demo to see it work).

function doOnOrientationChange() {  
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    switch(window.orientation) 
    {  
      case -90:
      case 90:
        alert('landscape'); // Just for debug obviously
        viewportmeta.content = 'initial-scale=0.6';
        break; 
      default:
        alert('portrait'); // Just for debug obviously
        viewportmeta.content = 'initial-scale=0.8';
        break; 
    }
}

// Only bind the event on iPhone and iPad so we do not try and do this on any other device.
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    window.addEventListener('orientationchange', doOnOrientationChange);
    // Initial execution if needed
    doOnOrientationChange();
}

set different initial-scale for landscape and portrait

2 Answers2