CODEWITHSUNDEEP
ioscssipad
truslivii.lev
truslivii.lev

Reputation: 701

set different initial-scale for landscape and portrait

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 ?

Upvotes: 13

Views: 1183

Answers (2)

Matt Derrick
Matt Derrick

Reputation: 5724

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();
}

Upvotes: 3

alesc
alesc

Reputation: 2780

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.

Upvotes: 6

Related Questions