2

我有一个正好 1000 像素宽和 850 像素高的 HTML 元素（它实际上是一个 iFrame，在画布标签上包含一个 HTML5 游戏，但我希望这不会有关系）。

我希望将元素呈现在平板电脑上，以便视口缩放以始终显示整个元素，仅此而已。因此，当平板电脑处于横向模式时，您会期望两边都有空白；在纵向模式下，下方（和上方？）会有空白区域。

在 iPad2 上进行测试时，纵向模式似乎开箱即用，视口自动将元素放在顶部并缩放以准确显示整个图像；但在横向模式下，它会做同样的事情并切断底部。

viewport我已经尝试了元标记的各种组合，例如<meta name="viewport" content="height=850"/>，但似乎无法让它始终如一地工作。

欢迎使用 jQuery 根据窗口大小的变化调整大小的解决方案。

4

3 回答 3

6

更好的解决方案是根据设备的屏幕宽度动态修改视口元标记。

例如，如果您的网站针对 1000 像素宽进行了优化（那么您希望将初始比例动态设置为将整个网站显示在视图中所需的精确缩放值。

  1. 在您的脑海中放置没有“内容”属性的视口元数据。

      <head>
       <meta id='viewport' name="viewport"/>
  </head>

  2. 在文档正文中添加一个 javascript 片段

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

于 2013-04-13T03:14:55.090 回答
2

iPad 视口大小在横向模式下为 1024 x 690 像素，在纵向模式下为 768 x 946 像素。

如果您将视口元标记的初始比例和最大比例属性设置为 0.768，它将完全适合纵向模式，但在横向模式下仍不会被截断。

<meta name="viewport" content="width=device-width, initial-scale=0.768, maximum-scale=0.768">
于 2012-11-23T05:26:33.147 回答
1

直接的解决方案如下：

  1. 检查宽度是否小于指定宽度。
  2. 如果小于指定宽度，则启动视口代码

所以解决方案如下：

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

而不是动态使用。此代码应该可以正常工作。

于 2013-10-01T15:23:01.383 回答