Set viewport for landscape mode only

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/34612485/set-viewport-for-landscape-mode-only

标签

html

mobile

responsive-design

viewport

landscape