3

モバイル ブラウザ用の画像のサイズ変更について質問したところ、回答がありました。

提供された答えは、インライン画像で機能します。ただし、ヘッダーの一部として背景画像も使用する必要があります。それらは css クラスを介して設定されます。Android では縦向きと横向きの両方で正しくスケーリングされますが、iPhone では縦向きから横向きに変わると自動的に拡大されます。これは問題です。ビューポート タグを次のように設定しています。

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

どうやら iPhone (少なくとも最新バージョン) を横向きモードにすると、より広い画面を考慮して背景を何度も繰り返すのではなく、非常に大きく再スケーリングおよびズームインします。

私のコードは次のようになります。

<tr><td colspan="2" class="logoHeader"><img src="/images/mobile/logoCopy.png" /></td></tr>

class logoHeader は次のようになります。

td.logoHeader {
  background: url(/images/mobile/transparentLeavesRight.png) top right no-repeat, 
            url(/images/mobile/transparentLeavesGradient.png) top left repeat-x;
  text-align:center;
}

何か案は？ビューポート メタのユーザー スケーラブルなプロパティを追加できることはわかっていますが、必要に応じてユーザーが手動でズームすることを妨げたくありません。電話が横向きモードになったときに自動的にズームしないようにしたいだけです。

参考までに: 検索を行ったところ、ほぼ同じ質問をしているthisとthisが見つかりました。しかし、どちらも数か月前のものであり、どちらも問題に対する実際の答えを持っていないので、誰かが暫定的に何かを考え出すことを願っています.

4

2 に答える 2

0

向きが変わったときに再スケーリングを避けるために試してください

<meta name='viewport' content='width=1024' />

必要に応じて幅を調整します。これが Android で正しく動作しない場合は、PHP+ユーザー エージェントの検出によっていつでも別のビューポート タグを送信するか、JavaScript によってデバイスに設定することができます。

于 2012-01-02T20:55:44.390 に答える
-2

ビューポートを次のように変更します。

<meta name="viewport" content="width=device-width, initial-scale="selfrender"/>
于 2011-02-07T18:47:07.110 に答える