html - 将视口(viewport)仅设置为横向模式

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/" >
为了防止用户将窗口大小扩展到需要正确显示的大小，可以将最大值设置为1。我会小心使用这项技术，因为它剥夺了用户放大页面以便在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页面的头部，它会将显示设置为适当的方向设置。
将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">