Change tablet viewport to exactly show fixed dimension element

问题

I have an HTML element that is exactly 1000px wide and 850px high (it's actually an iFrame containing an HTML5 game on a canvas tag, but I'm hoping that won't matter).

I want the element presented on a tablet so that the viewport scales to always show the whole element, and nothing more. So when the tablet is held in landscape mode, you would expect blank space either side; while in portrait mode there would be blank space below (and above?).

In testing on an iPad2, the portrait mode seems to work out of the box, with the viewport automatically putting the element at the top and zooming to show exactly the whole image; but in landscape mode it's doing the same thing and cutting off the bottom.

I've tried all sorts of combinations of the viewport meta tag, e.g. <meta name="viewport" content="height=850"/>, but can't seem to get it to work consistently.

A solution using jQuery to resize based on changes in the window size would be welcome.

回答1:

The iPad viewport size is 1024 x 690 px in landscape mode and 768 x 946 px in portrait mode.

if you set the initial-scale & maximum-scale property of the viewport meta tag to 0.768 it will fit exactely in portrait mode still won't be cutoff in landscape mode.

<meta name="viewport" content="width=device-width, initial-scale=0.768, maximum-scale=0.768">

回答2:

A better solution is to dynamically modify the viewport meta tag based on the device's screen width.

For example, if your website is optimized for 1000px wide (then you want to dynamically set the initial-scale to the exact zoom value required to put the entire site into view.

Place your viewport meta without a "content" attribute in your head.
```
  <head>
       <meta id='viewport' name="viewport"/>
  </head>
```

Add a javascript snippet inside your document body

  //our desired page width
  var desiredPageWidth = 1000;

  //detect the device screen width
  var screenWidth = 0;
  if(window.innerWidth > 0)
  {
       screenWidth = window.innerWidth;
  }
  else if(screen.width > 0)
  {
       screenWidth = screen.width;
  }

  //if your screen width is less than the desired page width
  //then calculat the initial zoom
  if(screenWidth < desiredPageWidth)
  {
       //initial zoom is the screenWidth / desiredPageWidth
       var viewportContent = "width="+desiredPageWidth+", maximum-scale=1, initial-scale="+screenWidth/desiredPageWidth;

       //dynamically set the viewport content
       document.getElementById('viewport').setAttribute('content', viewportContent);
  }

回答3:

The straight forward solution is below:

Check whether the width is less then the specified width.
If it is less then the specified width, kick off the view port code

so the solution is below:

$(document).ready(function(){
           if (screen.width < 767) {
                        var viewportContent = "width=device-width, maximum-scale=1, initial-scale=1";                            
                        document.getElementById('viewport').setAttribute('content', viewportContent);                         
            }
        });

Instead of using dynamically. This code should work without any problem.

来源：https://stackoverflow.com/questions/13523029/change-tablet-viewport-to-exactly-show-fixed-dimension-element

标签

viewport