web-dev-qa-db-ja.com

モバイルデバイスでWebページが拡大表示される

私は自分のウェブページでこのコードを使用しています

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

私は、最初のスケールでウェブページがズームアウトされることを確認すると思いますが、そうではありません。何か案は？

私はこれを試しました：

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

しかし、幅を1000pxに設定する必要があります。そうしないと、正しく表示されません。

回答：

<meta name="viewport" content="width=1000; user-scalable=0;" />
htmlviewport
35
EGHDK

initial-scale=1.0は、ブラウザにズームレベルを通常に設定するように指示します（つまり、ズームインまたはズームアウトしません）。必要なのはwidth=1000：

<meta name="viewport" content="width=1000">
41
Jeffery To

これを試して：

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

または

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
8
user1976613

私もそのビューポートが問題でしたが、それをテストした後、私はビューポートが問題ではないと考えました。

私の場合の問題は、CSS：固定幅、または幅：自動ではなく幅：100％でした。したがって、ビューポートが問題ではない場合、CSSが次の推測になります。

お役に立てば幸いです！

3
Alexey Shevelyov

で遊んでみた

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

私のサイトは実際に縮尺1で1000ピクセル幅にレンダリングされているようです。しかし、私の携帯電話の画面にはサイト用のスペースがないため、サイトはビューポートの外側に続き、サイトがズームインしているように感じます。

この値を設定すると、サイトが1000px幅でズームアウトされます。

 <meta name="viewport" content="width=1000">

これはあなたの問題ですか？

ちなみに、1000pxはモバイルWebサイトでは少し広いように聞こえますが、このWebサイトはもともとモバイルデバイス用に作成されたものではないと思いますか？

1
Robert Fricke

私の場合、次のコードを追加せずに追加するだけで、画面のズームを正常に停止できました。

    <meta name="viewport" content="width=device-width">
0
Moses Arepelli

これを使用できます。

    <meta name="viewport" content="width=100%">
0
Sundar

これを試してみてください...これは私のために働いた

 <meta name="viewport" initial-scale=1.0 content="width=100%">
0
Pranesh

同様の問題がありました。これを試して：

<meta name="viewport" content="width=1000; initial-scale=1, maximum-scale=1, minimum-scale=1"/>

最小スケールと関係があると思いますが、よくわかりません。

0
nevi_me