更改平板电脑视口以准确显示固定尺寸元素 [英] Change tablet viewport to exactly show fixed dimension element

问题描述

我有一个宽度正好为 1000 像素，高度为 850 像素的 HTML 元素(它实际上是一个 iFrame，在画布标签上包含一个 HTML5 游戏，但我希望这不会有影响).

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?).

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

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.

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

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.

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

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

推荐答案

iPad 视口尺寸在横向模式下为 1024 x 690 像素，在纵向模式下为 768 x 946 像素.

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

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

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">

这篇关于更改平板电脑视口以准确显示固定尺寸元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！