HTML/CSS - 起動時にモバイルがズームされる

起動時にすべてのモバイルデバイスが50％ズームされる問題があります。それはiPad以外のすべてのデバイスです。 iPad以外であれば50％をスケールアウトするPHPチェックをしようとしましたが、風景 - >ポートレート - >風景から移動した場合、再び50％スケールになります。ここでHTML/CSS - 起動時にモバイルがズームされる

は私の現在のMETAタグである：

<meta name="HandheldFriendly" content="true" /> 
<meta name="viewport" content="width=640, height=700, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

私のHTMLは唯一のピクセルに任意の幅を100％使用していません。全体的に内容は640幅と700高さを拡張しません。

誰も私がこの問題を回避する方法について考えている人はいますか？

編集

は@hakreは、画素の規模について右だったという結論に達しました。私の修正は、pxではなく％ですべての幅を設定することでした。この方法では、何のサイズであれ自動的にサイズを変更します。注目すべきは、スケールを削除したことです。理由はいくつかのデバイス上のレイアウトを台無しにするように見える理由です。もう一度おねがいします。

出典

2011-12-19 Dannie Hansen

：http://stackoverflow.com/questions/4472891/how-can-i-disable-zoom-on- a-mobile-web-page –

Yer、 '

いいえ、それは答えではありません。次に、ユーザーがページの拡大/縮小を許可しないようにするだけです。しかし、私の建物内のすべてのデバイスは、ユーザーとのやりとりなしで自動的にスケールを設定するので、これは解決策ではありません。とにかく試していただきありがとうございます:) –

CSSでは、pxはabsolute length unitです。これらは主に、出力環境がわかっているときに便利です。 CSSデバイスの場合

は、これらの寸法は、いずれかのそれらの物理的測定値に[CM、MM、PT、PCに】物理単位を関連付けることにより、（I）アンカー、または（ii）の関係によるものですピクセル単位[px]を参照ピクセルに設定します。 [追加やハイライト私によって]

参照画素は、デバイスのディスプレイの物理的なピクセルの半分である場合は700pxのCSS値がディスプレイに350pxであることを翻訳します - あなたの内または前記50％が質問。

あなたがここで経験したことはまったく正しいです、CSSはあなたがpxユニットを選んだという意味で正しいです、あなたはCSSのpxがディスプレイ上のピクセルと同じではないことを逃してしまっただけです。それだけではないので、間違ったユニットを選んだようです。

再度：絶対長ユニットは、出力環境がわかっているときに主に役に立ちます。

ブラウザにその変更を指示する方法があるかもしれません参考ピクセル？これはあなたの問題を解決するでしょう。または、今起こっていることを知っているように、デバイスを検出し、それに応じて長さを変更してください。

代わりに絶対的な長さを相対的な長さ（em、ex）に置き換えることができます。相対的なので、ページ全体を変更するには、相対的な要素の長さを変更するだけです。

これは一般に、<html>および/または<body>要素の絶対長と他のすべての要素の相対長さを使用して行われます。

この方法は、問題の解決にも役立ちます。

出典

2011-12-19 14:48:49 hakre

これは問題ではありません。モバイルブラウザのオンロードでは50％のズームが可能です。ズームアウトすることはできますが、要素の幅と高さは完全に訂正されます。考えられる解決策は、ズームアウトを最初に行うか、まったくズームしないかのいずれかです。書いてくれてありがとうございましたが、私はすでにそれを知っていました:) 私の問題は、ロード時にズーム状態になっているようです。要素の表示は正しいです。 –

ちょうど別の入力。すでにすべての要素に対して幅を設定していますが、この幅を拡張するものはありません。もう一度試していただきありがとうございます。 –

* zoom *はあなたのケースのCSSプロパティですか？もしそうなら、クライアントスタイルシートを貼り付けることはできますか？さらに、[CSS Device Adaptation]（http://dev.w3.org/csswg/css-device-adapt/）についてご存じですか？ベンダー固有のモジュールを使用する必要があるかもしれませんが、依然としてドラフトです。 – hakre

私はこれをAndroidのデフォルトブラウザとOpera Mobileでのみテストしましたが、うまくいくようです。ここにいくつかの回答の要素があり、残念ながらAndroidのブラウザでズームを無効にするそれでもまさか...

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
<meta name="viewport" content="target-densitydpi=device-dpi" /> 
<meta name="HandheldFriendly" content="true"/>

出典

2012-01-06 08:11:28 EpicMedia

HTML/CSS - 起動時にモバイルがズームされる

答えて

関連する問題