仅为横向模式设置视口 [英] Set viewport for landscape mode only

问题描述

我正在完成我的网站，除了一件小事外，一切都很完美。当我使用我的iPhone时，肖像模式与我想要的完全一样，问题在于横向模式。我就像我设计它，但我不喜欢最终版本...所以我需要插入另一行代码，但我不知道如何去做......

这是我现在正在使用的那个


< meta name =viewportcontent =width = device-width，initial-scale = 1>


现在我只需要一个风景模式。除了在横向模式中，我希望这个^一直工作。在横向模式下，我想要这个：

< meta name =viewportcontent =height = device-height，initial-scale = 1>

我的问题是如何说这只能在横向模式下工作？

谢谢

解决方案

，高度，初始尺寸，用户可扩展性，最小尺度和最大尺度。这里是一个表格，显示了这些属性的最小值和最大值：

< table>< table border =1bgcolor =＃eeeeee>< tbody>< tr>< th>< th>< th>< < th>最大值< / tr>< tr>< td>宽度< / td>< td> 200< / td>< td>< td>< td>< td><基于纵横比< / td>< td> 223< / td>< td>< td>根据纵横比< td>> 10000< / td>>< tr>>><适合于筛选< / td>< td>最小规模< / td>< td>< td>< / tr>< tr>< TD>最大规模< / TD>< / TR>< TR>< TD>用户可扩展及LT; / TD>< TD>是< / TD>< TD>否LT; / TD&克吨;< TD>是< / TD>< / TR>< TR>< TD>最小规模< / TD>< TD> 0.25< / TD>< TD>&安培; GT; 0℃; / TD>< TD→10< / TD>< / TR>< TR>< TD>最大规模< / TD>< TD> 1.6< / TD>< TD>&安培; GT; 0℃; / TD>< TD→10< / TD>< / TR>< / tbody的>< /表>

初始缩放比例是在页面初始加载时呈现的缩放比例。通过在设备上捏和双击来改变比例。您应该使用自动使宽度等于设备屏幕宽度的width =device-width来代替使用固定宽度：
< meta name =viewport为了防止用户将窗口大小扩大到超出需要正确显示的大小，可以将最大比例设置为1.0。我会小心使用这种技术，因为它会消除用户放大页面以便在iPhone等较小屏幕上观看的功能。这就是说它是如何完成的：



 < meta name =viewportcontent =width = device-width， maximum-scale = 1.0/> 
  

为iPhone和iPad定位使用JavaScript



上面显示的元标记工作得很好，但是，您也可以使用JavaScript来做同样的事情，因为iPad和iPhone都支持脚本语言。以下JavaScript函数通过使用窗口对象的innerWidth属性并定期设置body元素的orient属性（在本例中为每4秒）来检测和设置设备的视口方向：



 < script type =text / javascript> 
 var updateLayout = function（）{
 if（window.innerWidth！= currentWidth）{
 currentWidth = window.innerWidth; 
 var orient =（currentWidth == 320）？ 简介：风景; 
 document.body.setAttribute（orient，orient）; 
 window.scrollTo（0，1）; 
} 
}; 
 
 iPhone.DomLoad（updateLayout）; 
 setInterval（updateLayout，4000）; 
< / script> 
  

您可以将上面的代码片段放置在iPhone / iPad-ready网页的HEAD中，将显示器设置为适当的方向设置。
为iPhone和iPad定位使用CSS



另一种可以使用CSS的方法是使用层叠样式表（CSS）。显然，你需要一个专门用于肖像使用的样式表，另一个用于景观使用。我们将在未来的文章中介绍这些样式表的创建，但现在您需要知道您将如何使用它们。这很简单，只需在HEAD标记中添加链接到样式表即可：

 < link rel =stylesheetmedia = all and（orientation：portrait）href =portrait.css> 
< link rel =stylesheetmedia =all and（orientation：landscape）href =landscape.css> 
  




I'm finishing my website and everything works perfectly except for one little thing. When I'm using my iPhone, the portrait mode is exactly as I want it, the problem is the landscape mode. I is like I've design it, but I don't like the final version... So I need to insert another line of code, but I don't know how to do it...

This is the one I have right now

<meta name="viewport" content="width=device-width,initial-scale=1">

Now I need one just for the landscape mode. I want this one ^ to work all the time, except on landscape mode. On landscape mode I want this one:

<meta name="viewport" content="height=device-height,initial-scale=1">

My problem is how do I say that this should only work on landscape mode?

Thanks

解决方案

The properties of the viewport meta tag include width, height, initial-scale, user-scalable, minimum-scale and maximum-scale. Here is a table which shows the minimum and maximum values for those properties:

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

The initial-scale is the one that renders when the page initially loads. The scale is changed by pinching and double tapping on the device. Instead of using a fixed width, you should use the width="device-width" which automatically makes the width equal to the width of the device's screen: <meta name="viewport" content="width=device-width/" > To keep users from expanding the window size beyond the size it needs to display properly, you can set the maximum-scale to 1.0. I would use this technique carefully, as it takes away the user's ability to enlarge the page for viewing on smaller screens such as that of the iPhone. That said, here is how it's done:

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

Using JavaScript for iPhone and iPad Orientation

The meta tags shown above work very well, however, you can also use JavaScript to do the same thing, since both the iPad and iPhone support the scripting language. The following JavaScript function detects and sets the device's viewport orientation by using the innerWidth property of the window object and setting the orient attribute of the body element regularly (in this case every 4 seconds):

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

You can place the above snippet in the HEAD of your iPhone/iPad-ready web page, and it will set the display to the appropriate orientation setting. Using CSS for iPhone and iPad Orientation

Another method that you can use to your advantage is using Cascading Style Sheets (CSS). Obviously, you will need a style sheet that is devoted to portrait use, and another for landscape use. We will cover the creation of such style sheets in a future article, but for now you need to know how you will use them. It's as simple as adding a link to your style sheets within your HEAD tag:

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

这篇关于仅为横向模式设置视口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！