0

iPhone でウェブサイトをローテーションで自動スケーリングしたい。

このコード行を使用すると動作します:

<meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1.0, user-scalable=yes|no" />

しかし、問題は、横向きモードでは 1 つだけ有効にする必要があるにもかかわらず、縦向きと横向きの両方の CSS を有効にすることです。

<link rel="stylesheet" media="screen and (min-device-width : 320px) and (max-device-width : 480px)" type="text/css" href="css/mobileStyles.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
<link rel="stylesheet" media="screen and (max-width : 320px)" type="text/css" href="css/mobilePortraitStyles.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">

cssの上のメタの代わりにこの行を使用すると、正しく動作しますが、ローテーションの自動スケーリングは行われません:

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

何が問題ですか？私は何をすべきか？

上記のメタ行に加えて、次の行もあります。

<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="apple-mobile-web-app-capable" content="yes"/>

私はiPhone 4でそれをテストします（iOS5を使用）

4

2 に答える 2

0

回転時に自動スケールがない問題は、iOS のバグです。ビューポートで最大スケールを設定すると修正されるように見えますが、実際には他の多くの問題が発生します。ここで見られるように、ビューポートのサイズが変更されないため、メディア クエリがトリガーされません。

回避策を確認することをお勧めします。

于 2012-12-04T11:43:24.353 に答える
0

メディア クエリでオリエンテーション キーワードを使用してみましたか? 例えば

<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”&gt;
<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”&gt;
于 2011-11-29T12:42:45.673 に答える