Question

我正在完成我的网站，除了一件小事之外，一切都很完美。当我使用我的iPhone时，肖像模式完全符合我的要求，问题是横向模式。我就像我设计它，但我不喜欢最终版本...所以我需要插入另一行代码，但我不知道该怎么做...
<meta name="viewport" content="width=device-width,initial-scale=1">

现在我只需要一个横向模式。我希望这个^一直工作，除了横向模式。在横向模式中我想要这个：
<meta name="viewport" content="height=device-height,initial-scale=1">

我的问题是我怎么说这应该仅适用于横向模式？

由于

Answer 1

视口元标记的属性包括宽度，高度，初始比例，用户可缩放，最小比例和最大比例。下面是一个表格，显示了这些属性的最小值和最大值：

<table border="1" bgcolor="#eeeeee">
<tbody>
<tr>
<th>Property</th>
<th>Default Value</th>
<th>Minimum Value</th>
<th>Maximum Value</th>
</tr>
<tr>
<td>width</td>
<td>980</td>
<td>200</td>
<td>10000</td>
</tr>
<tr>
<td>height</td>
<td>based on aspect ratio</td>
<td>223</td>
<td>10000</td>
</tr>
<tr>
<td>inital-scale</td>
<td>fit to screen</td>
<td>minimum-scale</td>
<td>maximum-scale</td>
</tr>
<tr>
<td>user-scalable</td>
<td>yes</td>
<td>no</td>
<td>yes</td>
</tr>
<tr>
<td>minimum-scale</td>
<td>0.25</td>
<td>&gt; 0</td>
<td>10</td>
</tr>
<tr>
<td>maximum-scale</td>
<td>1.6</td>
<td>&gt;0</td>
<td>10</td>
</tr>
</tbody>
</table>

初始比例是在页面最初加载时呈现的比例。通过在设备上进行捏合和双击来改变刻度。您应该使用width =“device-width”而不是使用固定宽度，它会自动使宽度等于设备屏幕的宽度： <meta name="viewport" content="width=device-width/" > 为了防止用户将窗口大小扩展到需要正确显示的大小，您可以将maximum-scale设置为1.0。我会仔细使用这种技术，因为它会消除用户扩大页面的能力，以便在较小的屏幕上观看，例如iPhone的屏幕。也就是说，这是如何完成的：

<meta name="viewport" content="width=device-width, maximum-scale=1.0" />

使用JavaScript进行iPhone和iPad定位

上面显示的元标记非常有效，但是，您也可以使用JavaScript来执行相同的操作，因为iPad和iPhone都支持脚本语言。以下JavaScript函数通过使用window对象的innerWidth属性并定期设置body元素的orient属性（在这种情况下每4秒）来检测并设置设备的视口方向：

<script type="text/javascript">
var updateLayout = function() {
  if (window.innerWidth != currentWidth) {
    currentWidth = window.innerWidth;
    var orient = (currentWidth == 320) ? "profile" : "landscape";
    document.body.setAttribute("orient", orient);
    window.scrollTo(0, 1);
  }
};

iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 4000);
</script>

您可以将上述代码段放在iPhone / iPad就绪网页的HEAD中，然后将显示设置为相应的方向设置。使用CSS进行iPhone和iPad定位

您可以使用的另一种方法是使用层叠样式表（CSS）。显然，您需要一个专门用于肖像使用的样式表，另一个用于横向使用。我们将在以后的文章中介绍这种样式表的创建，但是现在您需要知道如何使用它们。就像在HEAD标签中添加样式表链接一样简单：

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

仅为横向模式设置视口

1 个答案: