更改数位板视口以准确显示固定的维度元素

Question

更改数位板视口以准确显示固定的维度元素

Mic*_*rne 2 viewport

我有一个HTML元素,正好是1000px宽和850px高(它实际上是一个在画布标签上包含HTML5游戏的iFrame,但我希望这无关紧要).

我想要在平板电脑上显示的元素,以便视口缩放以始终显示整个元素,仅此而已.因此,当平板电脑处于横向模式时,您会看到任意一侧的空白区域; 在纵向模式下,下方(和上方？)会有空白区域.

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

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

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

Answer 1

小智 6

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

例如,如果您的网站针对1000px宽进行了优化(那么您希望将初始比例动态设置为将整个网站放入视图所需的精确缩放值.

将视口元素放在头部没有"内容"属性.
```
  <head>
       <meta id='viewport' name="viewport"/>
  </head>
```
Run Code Online (Sandbox Code Playgroud)

在文档正文中添加一个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);
  }

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，11 月前
查看次数：	3036 次
最近记录：	12 年前